Using Advanced Selectors - Beginning CSS3 - page 298

Figure 13-5. The sequence of background colors is applied automatically

IE 8 and older browsers don't understand the :nth-child() pseudo-class, so the data cells all have the
same light mustard background color as in the preceding exercise.

Selecting Elements Based on Their Relationship with Another
Some selectors are now officially known as combinators because they combine two selectors to indicate a
relationship. The most common member of this category is the descendant selector (or descendant combinator,
as the CSS3 Selectors module calls it), which you met in Chapter 2 and have used extensively in this topic. You
also learned about the child selector (or combinator) in Chapter 11.

■ Note The name change makes no difference to how the descendant and child selectors work.

There are two other combinators: the adjacent sibling combinator and the general sibling combinator.
For convenience of reference, all four are listed in Table 13-3 .

Table 13-3. Combinators

Pattern Name Description

E F Selects any F element that is a descendant of an E element.

The descendant can be nested at any level.

Descendant combinator

E > F Selects any F element that is the direct child of an E element. Child combinator

E + F Selects an F element that immediately follows a sibling of type E .

Adjacent sibling combinator

E ~ F Selects all F elements that follow a sibling of type E . General sibling combinator

The only browser that doesn't support all combinators listed in Table 13-3 is IE 6, which supports only the
descendant combinator.