28 Chapter 3
If you want to specify a rule to apply to only the second p element, you
can chain some selectors together:a[href^='http://'][href*='/folder2/'][href$='.pdf'] {...}This code looks for a elements that have an href attribute beginning
with http://, ending with .pdf, and with /folder2/ contained within it. That’s
specific!The General Sibling Combinator x Contents in Detail
Our final new DOM selector in CSS3 is a combinator, which you’ll recall
means that it joins together more than one selector. The General Sibling
Combinator is an extension of the Adjacent Sibling Combinator, which was
introduced in CSS2. The syntaxes differ by just a single character:E + F {...} /* Adjacent Sibling Combinator */
E ~ F {...} /* General Sibling Combinator */The difference between the two is subtle but important: Adjacent
Sibling selects any element (F) that is immediately preceded by element
(E) on the same level of the document tree, but General Sibling selects any
element (F) that is preceded by element (E) on the same level of the tree,
regardless of whether it is immediately adjacent.
If that still sounds confusing, I’ll explain with an example. Let’s start
with this CSS:h2 + p { font-weight: bolder; } /* Adjacent Sibling */
h2 ~ p { font-style: italic; } /* General Sibling */And apply it to the following markup (truncated for clarity): <p>Next we're going to discuss...</p>
<h2>René Descartes</h2>
<p>A highly influential French philosopher...</p>
<p>He once famously declared:</p>
<blockquote>
x <p>I think, therefore I am.</p>
</blockquote>
y <p>However, this presumes the existence of the thinker.</p>You can see the outcome in Figure 3-4. In the CSS, I’m using the
Adjacent Sibling Combinator to bold the p element immediately adjacent
to the h2 element—that is, element . I’m also using the General Sibling
Combinator to italicize all the p elements following the h2 element, which
applies to elements , , and y.