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

Unlike the single colon of pseudo-classes, pseudo-elements employ a double-colon
syntax, like ::first-line . This is meant to distinguish pseudo-elements from pseudo-
classes. This was not always the case—in CSS2, both selector types used a single
colon—so for backwards compatibility, browsers will accept single-colon pseudo-ele-
ment selectors. Don't take this as an excuse to be sloppy, though! Use the proper num-
ber of colons at all times in order to future-proof your CSS; after all, there is no way to
predict when browsers will stop accepting single-colon pseudo-element selectors.
Note that all pseudo-elements must be placed at the very end of the selector in which
they appear. Therefore, it would not be legal to write p::first-line em since the
pseudo-element comes before the subject of the selector (the subject is the last element
listed). This also means that only one pseudo-element is permitted in a given selector,
though that restriction may be eased in future versions of CSS.
Styling the First Letter
The first pseudo-element styles the first letter, and only that letter, of any non-inline
element:
p::first-letter {color: red;}
This rule causes the first letter of every paragraph to be colored red. Alternatively, you
could make the first letter of each h2 twice as big as the rest of the heading:
h2::first-letter {font-size: 200%;}
The result of this rule is illustrated in Figure 1-44 .
Figure 1-44. The ::first-letter pseudo-element in action
As mentioned, this rule effectively causes the user agent to respond to a fictional element
that encloses the first letter of each h2 . It would look something like this:
<h2><h2-first-letter>T</h2-first-letter>his is an h2 element</h2>
The ::first-letter styles are applied only to the contents of the fictional element
shown in the example. This <h2-first-letter> element does not appear in the docu-
ment source, nor even in the DOM tree. Instead, its existence is constructed on the fly
by the user agent and is used to apply the ::first-letter style(s) to the appropriate bit
of text. In other words, <h2-first-letter> is a pseudo-element. Remember, you don't
have to add any new tags. The user agent will do it for you.