HTML and CSS Reference
In-Depth Information
And if we still don't have a clear winner?
So, if you had an element that belonged only to the
greentea
class, there
would be an obvious winner: the
p.greentea
selector is the most specific,
so the text would be green. But you have an element that belongs to
all
three
classes:
greentea
,
raspberry
, and
blueberry
. So,
p.greentea
,
p.raspberry
, and
p.blueberry
all select the element, and are of equal
specificity. What do you do now? You choose the one that is listed
last
in
the CSS file. If you can't resolve a conflict because two selectors are equally
specific, you use the ordering of the rules in your stylesheet file; that is, you
use the rule listed last in the CSS file (nearest the bottom). And in this case,
that would be the
p.blueberry
rule.
In your “elixir.html” file, change the greentea paragraph to include all the classes, like this:
<p class="greentea raspberry blueberry">
Save and reload. What color is the Green Tea Cooler paragraph now?
Next, reorder the classes in your HTML:
<p class="raspberry blueberry greentea">
Save and reload. What color is the Green Tea Cooler paragraph now?
Next, open your CSS file and move the p.greentea rule to the bottom of the file.
Save and reload. What color is the Green Tea Cooler paragraph now?
Finally, move the p.raspberry rule to the bottom of the file.
Save and reload. What color is the Green Tea Cooler paragraph now?
After you've finished, rewrite the green tea element to look like it did originally:
<p class="greentea">
Save and reload. What color is the Green Tea Cooler paragraph now?
