It doesn??™t matter
how many tags appear in between.
Because of this, the em tag within the span tag is affected by this rule.
Even though it is not an immediate child of the p tag, the rule still
applies, because it is a descendant of the p tag. Here??™s an example of
how you can state multiple tags in the selector to make the targeting
even more speci?¬? c
p span em {color:green;}
This results in Figure 2.7.
FIGURE 2.7 With three elements in
the selector, you can get very speci?¬? c
about which text will be green.
Your rule now states that only an em within a span within a p tag is
selected; you set a very speci?¬? c context in which the rule works, and
only one tag meets this criterion. In a contextual selector like this,
you can list as many selectors as you need to ensure that the tag you
want to modify is targeted.
However, things get more dif?¬? cult if you want to target the word
???speci?¬? c??? only; as you saw in Figure 2.5, the rule p em {color:
green;} selects the em tags inside both the paragraphs, and you simply
can??™t target just this particular tag with a standard contextual
selector. What you need here is a child selector.
STYLIN??™ WITH CSS - CHAPTER 2 38
Working with Child Selectors
In Chapter 1, I mentioned that a child tag is a direct descendant of
an enclosing tag. If you want to write a rule so that the tag you??™re
targeting has to be a child of a particular tag, then you can do that
too, using the > symbol, like this
p > em {color:green;}
Now you have successfully targeted the word ???speci?¬? c??? without
affecting the other em text, because ???speci?¬? c??? is contained in an
em tag that is a child of the p tag, but the words ???order stated??? are
not (Figure 2.
Pages:
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69