Selectors - Selectors, Specificity, and the Cascade - page 55

Styling the First Line
Similarly, ::first-line can be used to affect the first line of text in an element. For
example, you could make the first line of each paragraph in a document purple:
p::first-line {color: purple;}

In Figure 1-45 , the style is applied to the first displayed line of text in each paragraph.
This is true no matter how wide or narrow the display region is. If the first line contains
only the first five words of the paragraph, then only those five words will be purple. If
the first line contains the first 30 words of the element, then all 30 will be purple.

Figure 1-45. The ::first-line pseudo-element in action

Because the text from “This” to “only” should be purple, the user agent employs a
fictional markup that looks something like this:
<p><p-first-line>This is a paragraph of text that has only</p-first-line>
one stylesheet applied to it. That style
causes the first line to be purple. No other ...
If the first line of text were edited to include only the first seven words of the paragraph,
then the fictional </p-first-line> would move back and occur just after the word
“that.”

Restrictions on ::first-letter and ::first-line
In CSS, the ::first-letter and ::first-line pseudo-elements can be applied only to
block-level elements such as headings or paragraphs and not to inline-level elements
such as hyperlinks. In CSS2.1 and later, ::first-letter applies to all elements. There
are also limits on the CSS properties that may be applied to ::first-line and ::first-
letter . Table 1-5 displays the limits.

Table 1-5. Properties permitted on pseudo-elements

::first-letter ::first-line

All font properties All font properties

color color

All background properties All background properties

All margin properties word-spacing

All padding properties

letter-spacing