WEB STANDARDS CREATIVITY

96
Each of the paragraphs of introductory text will be styled with a different-colored background image and a larger type size,
as shown in Figure 4-6. Once again, the first rule is common to all three paragraphs.
div[id="worriers"] h2 + p,
div[id="worries"] h2 + p,
div[id="worrydone"] h2 + p {
min-height : 4em;
margin : 0;
padding : 5px 20px 40px 20px;
font-size : 120%;
line-height : 1;
color : #fff; }
div[id="worriers"] h2 + p {
background : #cc6195 url(../images/worryone-m.png) no-repeat 0 100%; }
div[id="worries"] h2 + p {
background : #dd82ae url(../images/worrytwo-m.png) no-repeat 0 100%; }
div[id="worrydone"] h2 + p {
background : #f0a4c7 url(../images/worrythree-m.png) no-repeat 0➥
100%; }
Figure 4-6. Distinctly different syling for the three introductory paragraphs
Wait, what is that + symbol doing in these selectors? This symbol is known as a sibling combinator and forms
an adjacent sibling selector. This type of selector selects one element based on the element that precedes it;
in this case, a p element that immediately follows an h2. Web designers and developers have largely avoided
this type of selector because of a lack of support for it in Internet Explorer prior to version 7.