Grouped selectors
Should you wish to set a property value for a number of different selectors, you can use
grouped selectors, which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website??™s headings have been set to be green. Note that
you??™re not restricted to a single rule for each element??”you can use grouped selectors for
common definitions and separate ones for specific property values, as follows:
AN INTRODUCTION TO WEB DESIGN
13
1
h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests,
contextual selectors define property values for HTML elements depending on context.
Take, for instance, the following example:
I am a paragraph.
So am I.
I am a paragraph within the navigation div.
Another paragraph within the navigation div.
You can style the page??™s paragraphs as a whole and then define some specific values for
those within the navigation div by using a standard element selector for the former and a
contextual selector for the latter:
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}
As shown, syntax for contextual selectors (#navigation p) is simple??”you just separate the
individual selectors with some whitespace.
Pages:
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71