HTML and CSS Reference
In-Depth Information
<ul id="subnav">
<li class="current" style="color:blue;">Current subsection</li>
</ul>
</div>
</div>
Because the inline style on the
li
(our target element) is more important than the selector in
our style sheet, the inline style wins and the list item text will be blue.
!important
This is the ultimate heavyweight: an
!important
declaration within a rule will override that
same property within
any other rule of equal or higher specificity
(as demonstrated earlier in
this chapter), with the exception of another
!important
declaration within a rule of higher
specificity anywhere in the style sheet, or equal specificity later in the style sheet. You should
generally leave such rules out of your style sheets, since they are intended to offer more con-
trol to users (allowing users to override author styles within a user style sheet), but it's useful to
understand how they work. Here's a quick example:
p {
color:red !important;
}
p {
color:blue;font-size:90%;
}
Both selectors have the same specificity, so normally the second rule would win based on
the rules of the cascade (as the last matching rule), but since the first rule includes
!important
in the
color
declaration, the paragraph will be red instead of blue. However,
font-size
will still
be
90%
, since that declaration is not being overridden.
■
Tip
Although the
!important
declaration's intended use is allowing users to override styles set by
a site's author, it's an incredibly useful tool for debugging styles when they are being difficult. Think of it as
sending a misbehaving property in your style sheet to its room to contemplate what it's done.
Real-World Examples
But aside from all these crazy calculations and talk of base-10 and comma delimiters, how
does knowing all this help us in real projects? Thankfully, it isn't all theoretical nonsense, so
let's consider some practical examples.
Navigation Menu Hover Effect
Let's start with a basic (in terms of specificity usage) but real-world example. On his personal
web site (
http://superfluousbanter.org
), one of the authors, Dan Rubin, wanted to create
some nifty effects for his sidebar's navigation items. His goal was to mimic a transparency
effect and at the same time reveal a hidden text element, along with changing the colors, all on
:hover
(see Figure 3-13).
