::first-line Selector

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

The ::first-line Pseudo-Element Selector has the following syntax:

::first-line
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        ::first-line { 
            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. 
            This is a test. This is a test. This is a test. This is a test. This is a test. 
        </p> 
        <p>This is a test. </p> 
    </body> 
</html>
  
Click to view the demo

To select p elements' first line, use p::first-line as the selector.

Home 
  HTML CSS Book 
    CSS  

Pseudo Selectors:
  1. ::first-line Selector
  2. ::first-letter Selector
  3. :before Selector
  4. :after Selector
  5. CSS Counter Feature
  6. :root Selector
  7. Child Selectors
  8. :first-child Selector
  9. :last-child Selector
  10. :only-child Selector
  11. :only-of-type selector
  12. :nth-child(n)
  13. :nth-last-child(n)
  14. :nth-of-type(n)
  15. :nth-last-of-type(n)
  16. Enabled Elements with :enabled
  17. Disabled Elements with :disabled
  18. Checked Elements with :check
  19. Default Elements with :default
  20. Valid Elements with :valid
  21. Invalid input Elements with :invalid
  22. :in-range selector
  23. :out-of-range selector
  24. :required selector
  25. :optional selector
  26. :link selector matches hyperlinks.
  27. :visited selector matches visited hyperlinks.
  28. :hover Selector
  29. :active Selector
  30. :focus Selector
  31. Negation Selector not
  32. :empty Selector
  33. :lang Selector
  34. :target Selector
Related: