Another interesting use for this selector
is as the inverse of the child selector??”a not-a-child selector, if
you will.
p * em {font-weight:bold;}
Here, any em tag that is at least a grandchild of the p tag, but not a
child, is selected; it doesn??™t matter what the em??™s parent tag is. (The
star selector is supported by all browsers, old and new.)
THE ADJACENT SIBLING SELECTOR
This rule selects a tag that follows a speci?¬? c sibling tag (sibling tags
are at the same level in the markup hierarchy??”that is, they share
the same parent tag). Here??™s an example
h1 + p {font-variant:small-caps}
STYLIN??™ WITH CSS - CHAPTER 2 46
Applying this rule to this markup
All about siblings selectors
There must be at least two selectors, with a + sign
before the last one.
The targeted selector will only be affected if it is a
sibling to, and preceded by, the one before the + sign.
results in what is shown in Figure 2.15, because only the ?¬? rst paragraph
is preceded by a sibling h1 tag.
FIGURE 2.15 Sibling selectors work
based on the preceding tag in the
markup, and both must be nested
at the same level. This is one of the
trickier selectors to understand.
As you can see, the p tag that follows the h1 meets the condition of
the rule, so it is in small caps. The second p tag, which is not adjacent
to the h1, is unaffected.
Pages:
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78