HTML and CSS Reference
In-Depth Information
Welcome to the best place on the web for meerkat information!
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
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
Search WWH ::

Custom Search