:first-line and :first-letter

  • Supported by Explorer 5 on Mac, Explorer 5.5 and 6 on Windows, Opera 5, Konqueror 2.1 and lower and Netscape 6.
  • Konqueror 2.2 crashes on this page, but 3 seems to handle it well (not tested myself).

    •  

    The psuedo-classes :first-line and first-letter are for giving special styles to the first line and letter of an HTML element. The first line is determined by the browser as the real first line of the paragraph on the screen. So if you resize your browser window the first line will become longer or shorter, nonetheless only it will remain red.

    Testsheet:

    P:first-line {color: #cc0000;}
P:first-letter {font-size: 50px; color: #0000cc;}
P {line-height: 120%;}

    I added P {line-height: 120%;} to the style sheet because Opera and Netscape apply a too large line-height to the first line because of the large first-letter. Setting the line-height helps (don't ask me why). Explorer 6 has no such problems.

    Contents