Note that the span, a tag that has no default attributes,
doesn't affect anything because I didn??™t explicitly style it.
CONTEXTUAL CLASS SELECTORS
If you only want to target one paragraph with the class, you create a
selector that combines the tag name and the class, like this (Figure
2.10)
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
p.specialtext {color:red;}
FIGURE 2.10 By combining a tag
name and class name, you make the
selector more speci?¬? c.
This is another kind of contextual selector because the class must be
in the context of a paragraph for the rule to be applied.
You can go one step further and write the following (Figure 2.11)
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
p.specialtext {color:red;}
p.specialtext span {font-style:italic;}
HOW CSS WORKS 41
FIGURE 2.11 By adding a second
selector, you can be very speci?¬? c
about which tag is styled.
Now the word ???regardless??? is bold and italicized because it is in a
span tag that is in a paragraph with the specialtext class, as the rule
speci?¬? es. If you also want this rule to target the span in the h1 tag,
you can modify it in one of two ways. The easiest way is not to associate
the class with any speci?¬? c tag (Figure 2.12).
.specialtext span {font-style:italic;}
FIGURE 2.12 With a less speci?¬? c
selector, the headline??™s span text is
also selected.
Pages:
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72