HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search