Figure 2.3 shows
how this code looks with just the browser??™s default styling.
FIGURE 2.3 Here, only the browser??™s
default styles are applied.
Figure 2.4 shows the markup??™s hierarchy.
FIGURE 2.4 This is the hierarchy for
the code on the previous page.
body
h1 p p
em span em
em
This hierarchy diagram illustrates which tag is nested inside which.
If you write this style
em {color:green;}
for the markup on the previous page by adding it between the style
tags in the head of your document, all the text in em tags would turn
green (Figure 2.5 on the next page).
STYLIN??™ WITH CSS - CHAPTER 2 36
FIGURE 2.5 In this example, all text
within em tags is green.
But what if you want to be more selective? Let??™s say you only want
the em text within the paragraphs to be green. If this is the case, you
would write a rule like this
p em {color:green;}
which would result in Figure 2.6.
FIGURE 2.6 By adding a contextual
selector, you cause the rule to affect
only paragraphs, not the heading.
Because you preceded the em with a p in the selector, only em tags
within p tags are now targeted by the rule; the em tag in the h2 tag
HOW CSS WORKS 37
is no longer affected. Note that, unlike the group selectors you saw
earlier, contextual selectors have spaces, not commas, between the
selectors.
Remember, rules with contextual selectors are applied only to the
last tag listed, and then only if the selectors that precede it appear in
this same order somewhere in the hierarchy above it.
Pages:
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68