Using Basic Selectors - Beginning CSS3 - page 33

Figure 2-8. The combination of the type and class selector targets only the paragraph

Using Pseudo-elements
You append the pseudo-element to the basic selector in the same way as a pseudo-class, for example:
p.intro:first-line {
text-transform: uppercase;
}
This applies the style to the first line of any paragraph with the intro class. As Figure 2-9 shows, the length of the
first line changes when the browser viewport is resized.

Figure 2-9. The size of the pseudo-element changes dynamically

To style just the first letter of an element, use the :first-letter pseudo-element like this:
p:first-letter {
font-size: 28px;
}

In most browsers, the combination of these two style rules that use pseudo-elements produces the result
shown in Figure 2-10

■ safari and google Chrome won't apply two pseudo-elements simultaneously. They apply the
:first-letter styles, but ignore the :first-line rule completely. The Css3 selectors module says only one pseudo-
element may appear per selector, so you can't chain them like this: p::first-letter::first-line . However, it's not
clear whether the restriction of one pseudo-element also applies to separate style rules as used here.

Note