HTML and CSS Reference
In-Depth Information
How the Cascade, Inline Styles, and !important Affect Our
Scoring
When browsers calculate specificity, the selector with the highest score takes precedence, no
matter where in the style sheet that selector is located.
However, there are three exceptions to this pattern:
•
When two or more selectors of the same specificity match the same target element
•
If inline styles are applied to an element targeted by selectors within a style sheet
•
If the
!important
declaration is used
Matching Selectors
When two or more selectors of the same specificity match the same target element, the last
matching selector takes precedence. This behavior is due to the rules of the cascade, covered
earlier in this chapter. Let's use the following markup as an example:
<div id="main">
<div id="content">
<p class="note">This paragraph has class.<p>
</div>
</div>
Although the following two selectors both match the same target (
<p class="note">
), only the
last rule will be applied:
#content p.note {
font-size:small;
}
#main p.note {
font-size:x-small;
}
Inline Styles
Inline styles (styles applied directly to an element using the
style
attribute) are the reason for
the first column in our scoring table: an inline style overrides
any selector
that matches that
specific element (with the exception of
!important
declarations, covered in a moment). Let's
say we have a fairly specific selector in our style sheet to change the color of text within an
li
when it is assigned
class="current"
:
#wrapper div#content ul#subnav li.current {
color:red;
}
Normally, this would color any
<li class="current">
red. However, in our markup, there
exists an inline style:
<div id="wrapper">
<div id="content">
