W3docs
en
Log in

CSS ::first-line Pseudo Element

Use the ::first-line CSS pseudo-element for selecting and styling the first line in a block-level container. Read about the pseudo-element and try examples.

The ::first-line pseudo-element applies styles to the first line of a block-level container. It does not select inline-level elements, such as images or inline-tables.

Only a specific set of CSS properties can be applied to ::first-line. The complete list is detailed in the Allowable Properties section below.

The ::first-letter pseudo-element inherits only the properties applicable to ::first-line. For all other properties, it inherits from the parent element. If both pseudo-elements are used, styles defined on ::first-letter override those inherited from ::first-line.

The ::first-line pseudo-element can also be written with a single colon (:first-line), which is supported by all browsers.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Allowable Properties

The ::first-line pseudo-element accepts only some CSS properties. Let’s see them:

Specificity and Inheritance of the ::first-line Pseudo-element

Text on the first line inherits only the properties applicable to the ::first-line pseudo-element. For all other properties, it inherits from the parent element. For example, the ::first-letter pseudo-element inherits the styles applied by the ::first-line pseudo-element.

The ::first-line pseudo-element has higher specificity than the base element selector, so its styles override normal declarations on the element. However, standard CSS !important rules still apply according to normal cascade rules.

Syntax

CSS ::first-line syntax example

::first-line {
  css declarations;
}

Example of the ::first-line pseudo element:

CSS ::first-line code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Try it Yourself »

Result

CSS ::first-line property

Practice

Practice

What can the ::first-line pseudo-element selector be applied to in CSS?