CSS Reference Pseudo-class

::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 display: 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:

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.

Examples

The following snippet will transform the words in the first-line of the first paragraph in an article to uppercase. The example uses the :first-of-type pseudo-class selector to select the first paragraph in the article.

/* chaining ::first-line with the :first-of-type selector */
p:first-of-type::first-line {
    text-transform: uppercase;
    font-weight: bold;
}
                

The following line of CSS would have no effect on the first line of the paragraph because margin properties cannot be applied to ::first-line.

p::first-line {
    margin-left: 1.5em;
}
                

Live Demo

The following demo styles the first line of paragraphs in an article. The first line is underlined, made bold, and transformed to all-uppercase letters.

If your browser supports the :first-of-type pseudo-class selector, you should also see the first-line of the first paragraph colored in pink.

View this demo on the Codrops Playground

The first line of all paragraphs in the demo should be rendered in uppercase letters. If you’re on Chrome, this may not work. See the browser support section notes below for details.

Browser Support

The two-colon (::first-line) syntax is supported in Chrome, Firefox, Safari, Opera, Internet Explorer 9+, and on Android and iOS.

The two-colon (::first-line) syntax introduced in CSS Level 3 is not supported in Internet Explorer 8 and earlier, only the single-colon syntax (:first-line) is supported in those versions down to version 5.5.

Notes

There is an old bug in Chrome that prevents text-transform from being applied to the ::first-line element.

Written by

Last updated November 18, 2015 at 7:46 pm by Sara Soueidan

Do you have a suggestion, question or want to contribute? Submit an issue.