:first-line (CSS selector)

Description

This pseudo-element represents the first formatted line of text in a block-level element, an inline block, a table caption, or a table cell. As with the :first-letter pseudo-element, the first line may actually occur inside a block-level child element.

The amount of text that’s represented by :first-line depends on how the text is rendered—it’s affected by factors like font size and line width. If the user changes the text size or the width of the browser window, more or fewer characters could become part of the pseudo-element.

Here’s an example rule set and HTML block:

p:first-line {
  text-transform: uppercase;
}

<p>This is a paragraph of text containing several lines of text.
How this text is broken up into lines by a user agent depends on
how the text is rendered, font properties, size of browser window,
and size of viewing device.</p>

The selector p:first-line will match the first line of text rendered by the user agent. We can see how a user agent might insert the pseudo-element into the HTML block like this:

<p><p:first-line>This is a paragraph of text</p:first-line>
containing several lines of text.
How this text is broken up into
lines by a user agent depends on
how the text is rendered, font
properties, size of browser
window, and size of viewing
device.</p>

The above markup isn’t valid HTML; it’s just a visualization of the pseudo-element concept.

If the first child node of an element is another block element, this pseudo-element will propagate to the child node. Here’s another example:

<div>
  <p>This is a paragraph of text containing several lines of text.
  How this text is broken up into lines by a user agent depends on
  how the text is rendered, font properties, size of browser
  window, and size of viewing device.</p>
</div>

Both the div:first-line and p:first-line selectors will be able to be matched in this case. The equivalent pseudo-markup is:

<div>
  <p>
    <div:first-line>
      <p:first-line>This is a paragraph of text</p:first-line>
    </div:first-line>
    containing several lines of text.
    How this text is broken up into
    lines by a user agent depends on
    how the text is rendered, font
    properties, size of browser
    window, and size of viewing
    device.</p>
</div>

Compatibility

The behavior mentioned above, where if the first child node of an element is another block element, this pseudo-element is propagated to the child node, is not supported by Internet Explorer up to and including version 7, Firefox up to and including version 3.5, and Opera up to and including version 10. However, Safari and Chrome do support this behavior correctly.

In Internet Explorer 6, this pseudo-element fails if it’s not immediately followed by whitespace. This means that whitespace must appear between the pseudo-element and the declaration block, as well as between the pseudo-element and the comma, if the pseudo-element isn’t the last selector in a group of selectors.

In Internet Explorer 8 the !important declaration is ignored if the selector contains a :first-letter or :first-line pseudo-element.

In Internet Explorer versions up to and including 7:

• This pseudo-element doesn’t work when it’s used on an element that has a layout.

• This pseudo-element acts like a block element—it spans the entire width of the containing block instead of displaying inline.

• The list-item marker is included within this pseudo-element.

• Bizarre specificity and inheritance problems affect this pseudo-element.¹