HTML and CSS Reference
In-Depth Information
Combining selectors
CSS is very flexible in how selectors are defined, and there are plenty of opportunities
to save typing if you are careful with your HTML and CSS structures. For example, if
a group of selectors have the same CSS declarations they are applying, these style rules
can be combined into a comma-separated list, called a selector list , which will assign
a set of the CSS declarations to all the selectors in the list. For example, the following
would change the color of all headers on the page to red:
h1,h2,h3,h4,h5,h6 { color:red; }
This just saves space and the time of having to type the same CSS declarations over
and over; the selectors are still separate entities. It is possible, however, to combine se-
lectors into aggregate selectors, called compound selectors , which can be used to match
specific content in a web page's structure. Consider a code snippet from earlier:
<span class="alert critical">dangerous</span>
This element has two classes applied so can be styled using three different selectors:
span.alert { }
span.critical { }
span.alert.critical { }
The first two class selectors simply pick out one or the other class—they will referen-
ce any span element that has one or the other of the two class values assigned to it. The
third chains the two class values together to create a compound selector that will only
reference span elements that have both classes applied.
If the type selector is left off (as was done in earlier examples), all elements will be
searched for a match. This is equivalent to using the * selector (called the universal se-
lector ) in combination with another selector (in this case a class selector):
.critical { color:red; }
/* match all elements for
class 'critical' */
*.critical { color:red; }
/* match all elements for
class 'critical' */
p.critical { color:red; }
/* match paragraph elements
for class 'critical' */
Note You are likely familiar with this, but if CSS is not something you spend much
time with perhaps you don't recognize the purpose of the /* text */ part in the
Search WWH ::




Custom Search