CSS Selector - Using the ::first-line Selector








The ::first-line selector matches the first line of a block of text.

:first-line is a Pseudo-element and it generates a pseudo-element that contains the first formatted line of an element.

:first-line styles the first line of text in an element, no matter how many or few words may appear in that line.

:first-line can be attached only to block-level elements.

There is a limited set of properties that can apply to a first line.

Examples: 

p.lead:first-line {font-weight: bold;}

The "first-line" pseudo-element can only be used with block-level elements. The following properties apply to the "first-line" pseudo-element:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear




Summary

CSS Version
1

CSS Syntax

CSS3 syntax with double colon

::first-line { 
   style properties 
}

CSS3 syntax with single colon

:first-line { 
   style properties 
}

Browser compatibility

::first-line Yes 9.0 Yes Yes Yes

Internet Explorer 5.5-8 only support the old, single-colon CSS2 syntax (:first-line).





Example

The following code shows an example of using the ::first-line selector. 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
::first-line {<!--from  w  w  w. j  a  va2  s . co m-->
  background-color: grey;
  color: white;
}
</style>
</head>
<body>
  <p>This is a test. This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test. This is a test.
  </p>

  <p>
    I like <span lang="en-uk" class="class2">CSS</span>.
  </p>

  <a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

Example 2

An example showing how to use :first-line CSS selector. 

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line{<!--from   ww w  .j  av  a 2s. c  o m-->
    background-color:red;
}
</style>
</head>

<body>
<p>This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. </p>
</body>
</html>

Click to view the demo

Example 3

In the following example the first line in p element is styled. 

p:first-line{
   color:#ff0000;
   font-variant:small-caps;
}

The following code uses the first letter and first line Pseudo-element to add style to a paragraph.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
<!--from   ww w .jav  a  2s  . c o m-->
            p::first-letter {
                font-size: 200%;
                background-color: lightgray;
                border: 1px solid black;
            }
            p::first-line {
                letter-spacing: 5px;
            }

        </style>
    </head>
    <body>
            <p>
                This is a test. 
                This is a test. 
                This is a test. 
                This is a test. 
            </p>
    </body>
</html>

Click to view the demo