::first-line

::first-line is a pseudo-element used to select the first formatted line in a block-level element (such as a paragraph <p>).

As with all pseudo-elements, it does not match any real HTML element. The ::first-line pseudo-element does not select the first line of an inline-level element; that is, an element that has <a href="http://tympanus.net/codrops/css_reference/display">display</a>: inline. It only works on elements that have a display value of block, inline-block, table-cell, table-caption, or list-item.

The amount of text in the first line of an element depends on a number of factors, including the width of the page, the font size, etc.

Properties used to style ::first-line

The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. Only a subset of CSS properties can be used to style a ::first-line:

• Font Properties: font, font-style, font-variant, font-weight, font-size, line-height, and font-family.
• Background properties: background, background-color, background-image, background-position, background-repeat, background-size, and background-attachment
• text-decoration, text-transform, letter-spacing, word-spacing and color

User agents may apply other styles as well.

Trivia & Notes

The first formatted line of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not out-of-flow due to floating or positioning). For example, the first line of the div in the following example is the first line of the paragraph p (assuming that both div and p are block-level and don’t have their display changed).

<div>
    <p>This line...</p>
</div>
                

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. So, in the following example, the first formatted line of the div is not the line “Hello”.

<div>
    <p style="display: inline-block">
        Hello
        <br>
        Goodbye
    </p> 
    etcetera
</div> 
                

Also note that the first line of the paragraph p in the following example doesn’t contain any letters (assuming the default style for <br>). The word “First” is not on the first formatted line; the first formatted line is made up of an empty space only.

<p><br>First...</p> 
                

Just like other pseudo-elements and pseudo-class selectors, ::first-line can be chained with other pseudo-classes and pseudo-elements. See the examples section below for more.

Inheritance and Specificity

During CSS inheritance, the portion of a child element that occurs on the first line only inherits properties applicable to the ::first-line pseudo-element from the ::first-line pseudo-element. For all other properties inheritance is from the non-pseudo-element parent of the first line pseudo element. (The portion of a child element that does not occur on the first line always inherits from the parent of that child.)

The ::first-letter pseudo-element can be used to style the first letter of the element. The ::first-letter will inherit the styles applied using ::first-line. If both ::first-line and ::first-letter are used, the styles specified by ::first-letter override those applied by ::first-line.

Styles applied by ::first-line will override any styles applied to the first line on the element. That is, any styles applied on a paragraph, for example, will be overridden by conflicting styles applied using ::first-line—::first-line always wins, even if the paragraph has some style rule set with an !important bash. For example:

<p class="text" id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi aspernatur accusamus repudiandae atque suscipit dolorem rerum. Iure explicabo repellendus magnam quisquam porro vitae quibusdam quam maiores fugiat! Enim, sed.
</p>
                

The ::first-line pseudo-element will be used to apply styles to the first line in that paragraph.

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

The text in the first line of the paragraph will be transformed to uppercase, despite the existence of each or any of the following rules in the style sheet:

/* General type (tag) selector */
p {
    text-transform: lowercase;
}

/* Class selector */
.text {
    text-transform: lowercase;
}

/* ID selector */
#text {
    text-transform: lowercase;
}

/* ID selector with !important bash */
#text {
    text-transform: uppercase !important;
}
                

The style applied by the ::first-line rule will override each of the styles applied using the above four selectors.

Different notations: (:) and (::)

You will most likely come across (or have come across) the notation :first-line which uses one colon instead of two.

In CSS1 and CSS2, pseudo-elements were defined to start with one colon (:), just like pseudo-classes (for example :hover). In CSS3, the double colon notation (::) was introduced for pseudo-elements in order to differentiate them from pseudo-classes.

/* old CSS2 syntax */
p:first-line {
    /* content and styles here */
}

/* new CSS3 syntax */
p::first-line {
    /* content and styles here */
}
                

All browsers that support the two-colon notation also support the one-colon notation. Internet Explorer 8, however, does not support the two-colon notation. So, unless you need to support Internet Explorer 8 or older versions, you can use the two-colon notation without having to worry about browser support.

In all the demos in this entry, the one-colon syntax is used to provide wider browser support for readers viewing the demos in IE8.