totn CSS

CSS :first-line selector

This CSS tutorial explains how to use the CSS selector called :first-line with syntax and examples.

Description

The CSS :first-line selector allows you to target the first line of a block element.

Syntax

The syntax for the :active CSS selector is:

element:first-line { style_properties }

Parameters or Arguments

element
The type of element that you wish to style the first line for.
style_properties
The CSS styles to apply to the first line element.

Note

  • The :first-line selector is a pseudo-class that allows you to target the first line of a block element.

Browser Compatibility

The CSS :first-line selector has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 5.5+ (IE 5.5+)
  • Opera 3.5+
  • Safari (WebKit)

Example

We will discuss the :first-line selector below, exploring examples of how to use this selector in CSS to apply styling.

With <p> tag

Let's look at a CSS :first-line example where we apply the :first-line selector to a <p> tag.

The CSS would look like this:

p:first-line { color: red; }

The HTML would look like this:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>

The result would look like this (The :first-line selector would style the <p> tags as follows):

CSS

In this CSS :first-line example, the first text within the <p> that appears without wrapping in the browser window will display as red. Once the text wraps, it is no longer styled by the :first-line selector.

With <div> tag

Let's look at a CSS :first-line example where we apply the :first-line selector to a <div> tag.

The CSS would look like this:

div:first-line { color: blue; font-size: 1.2em; }

The HTML would look like this:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>
<div>
  <p>The information presented here is suitable for all programmers from beginner to expert. We hope you find this information useful and return to our site, as we expand our information base.</p>
</div>

The result would look like this (The :first-line selector would style the <div> tags as follows):

CSS

In this CSS :first-line example, the first text within each of the <div> tags that appears without wrapping in the browser window will display as large blue text. Once the text wraps, it is no longer styled by the :first-line selector.

Share on: