You can combine element selectors with class selectors. Look
at the following code:
p.first {
font-style: italic;
color: lightblue;
}
This code translates as follows: "Text in paragraphs of the class
first will be light blue and italicized."
When would you use this construction? Let's say that Alice, now a permanent resident,
has convinced the Queen that Wonderland should adopt a constitutional monarchy form of
government. It has fallen to Alice to head up the committee to draft this constitution.
Of course 21st-century Wonderland is a digital society, so the constitution
will be promulgated on the Web. There are, needless to say, many paragraphs and sub-
paragraphs, and Alice — as Web Mistress in Chief — has decided to group
related paragraphs into sections with <div>s. Alice
wants the first paragraph of each section — a synopsis — to stand out, so
she decides that the text should be light blue and italicized. The following markup
(code) will accomplish this task:
<p class="first">This section describes the duties of the Royal Family.....</p>
The only paragraphs that have been styled by the rule near the top of this page are those of the class
"first." Text in all other paragraphs will be neither light blue nor italicized.
Well, wouldn't the following code accomplish the same thing?
first {
font-style: italic;
color: lightblue;
}
Yes, it will accomplish the same thing! But Alice later decides that the first
sentence of each paragraph after the first paragraph should have a
different font face but should not be either light blue or italicized. She can't use
the code <span class="first"> for these first sentences, because that
would make them light blue and italicized. And to further complicate her life, Alice wants to use the same class name — "first" — for both those first paragraphs and the later first sentences. What's a poor girl to do?
p.first {
font-style: italic;
color: lightblue;
}
span.first {
font-family: Tahoma, sans-serif;
}
Now all text contained within any <span> of the class
first will be displayed with the Tahoma font or, if that font is not
available, some other sans-serif font. Here's what the markup will look like:
<p class="first">This section decries the duties of the Royal Family.....</p>
<p><span class="first">The express duties of the Royal Family shall include...</span>...</p>
We have two classes designated "first," but one applies to paragraphs while the other
applies to spans.
Combining Element and Class Selectors
