Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

More Selectors 191

8

As you can see, both paragraphs have the drop cap. This is where the next sibling selec-
tor comes in handy. I can use the selector I introduced earlier to ensure that only the first
paragraph on the page has the drop cap, as shown in Figure 8.21.

Input ▼

h1 + p:first-letter {
font-size: 300%;
float: left;
font-family: sans-serif;
padding: 0 5 px;
}

Output ▼

FIGURE 8.20

Drop caps recre-

ated using the

:first-letter

pseudo-class.

FIGURE 8.21
Using the sibling
selector limits the
drop cap to the
first paragraph.