HTML and CSS Reference
In-Depth Information
<p>
Welcome to the best place on the web for meerkat information!
</p>
Figure 2-6. Zero specificity defeats no specificity
Since the universal selector applies to all elements and has zero specificity, its color
declaration's value of
gray
wins out over the inherited value of
black
, which has no
specificity at all. Therefore, the
em
element is rendered gray instead of black.
This example vividly illustrates one of the potential problems of using the universal
selector indiscriminately. Because it can match any element, the universal selector often
has the effect of short-circuiting inheritance. This can be worked around, but it's usually
more sensible to avoid the problem in the first place by not using the universal selector
indiscriminately.
The complete lack of specificity for inherited values is not a trivial point. For example,
assume that a style sheet has been written such that all text in a “toolbar” is to be white
on black:
#toolbar {color: white; background: black;}
This will work as long as the element with an
id
of
toolbar
contains nothing but plain
text. If, however, the text within this element is all hyperlinks (
a
elements), then the
user agent's styles for hyperlinks will take over. In a web browser, this means they'll
likely be colored blue, since the browser's internal style sheet probably contains an
entry like this:
a:link {color: blue;}
To overcome this problem, you must declare:
#toolbar {color: white; background: black;}
#toolbar a:link {color: white;}
By targeting a rule directly at the
a
elements within the toolbar, you'll get the result
shown in
Figure 2-7
.
Figure 2-7. Directly assigning styles to the relevant elements
