HTML and CSS Reference
In-Depth Information
span
First, we set
visibility:hidden;
for the
span
, effectively making the text invisible to the user.
We chose this approach rather than using
display:none;
to avoid strange positioning issues
that might arise on
:hover
, since the text is already being rendered by the browser rather than
replacing empty space. By simply switching to
visibility:visible;
on
:hover
, we ensure that
the text will seem to magically appear to the user; the
:hover
pseudo-class counts as a class
selector in the specificity calculation, giving the second
span
selector a higher score than the
first selector and thus allowing us to override the visibility of the text (see Table 3-2).
Table 3-2.
Specificity Effect: Span Visibility
Inline
# of ID
# of Class
# of Element
Selector
Style
Selectors
Selectors
Selectors
#sidebar ul a span
0,
1,
0,
3
#sidebar ul a:hover span
0,
1,
1,
3
a and em
Finally, our effect relies on changing the
a
and
em
styles to mimic transparency using colors to
achieve the desired result:
•On
:hover
, we set the background-color of
a
to a slightly darker gray than the sidebar
background, but it still sits beneath our
em
text.
•
To get our transparent look, we change the color of the text contained within the
em
ele-
ments, also to a darker gray (from
#808080
to
#4d4d4d
).
In the end result, it appears as if the background of the link area is transparent and sitting
closer to the viewer than the description text (
em
). Once again, this works because the first
selectors for
a
and
em
have lower specificity scores than the
:hover
selectors (see Table 3-3).
Table 3-3.
Specificity Effect: Faking Transparency
Inline
# of ID
# of Class
# of Element
Selector
Style
Selectors
Selectors
Selectors
#sidebar ul a
0,
1,
0,
2
#sidebar ul a em
0,
1,
0,
3
#sidebar ul a:hover
0,
1,
1,
2
#sidebar ul a:hover em
0,
1,
1,
3
Styling Links in a Footer
A common requirement in many site designs is alternate link or text styling for a certain area
within a layout, and frequently that area is the footer. Thanks to selector specificity, we can
override generic styles set elsewhere in our style sheet, and get even more specific with the
help of a few strategically placed IDs. The result (Figure 3-14) is quite nice, but how do we get
there?
