HTML and CSS Reference
In-Depth Information
How the Cascade, Inline Styles, and !important Affect Our
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>
Although the following two selectors both match the same target ( <p class="note"> ), only the
last rule will be applied:
#content p.note {
#main p.note {
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 {
Normally, this would color any <li class="current"> red. However, in our markup, there
exists an inline style:
<div id="wrapper">
<div id="content">
Search WWH ::

Custom Search