Text Pseudo-Classes

There are two very helpful pseudo-classes that can help you work with text. These pseudo-classes allow you to render either the first letter or the first line of an element in a different way than the rest of that element. Both of these are commonly used when laying out text.

¢The first-letter Pseudo-Class

¢The first-line Pseudo-Class

The first-letter Pseudo-Class:

¢The first-letter pseudo-class allows you to specify a rule just for the first letter of an element. This is most commonly used on the first character of a new page, either in some magazine articles or in books.

p.pageOne:first-letter {font-size:42px;}

The first-line Pseudo-Class:

¢The first-line pseudo-class should allow you to render the first line of any paragraph differently from the rest of the paragraph.

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