HTML and CSS Reference
In-Depth Information
Style Precedence
A single HTML or XHTML document can import and link to multiple external style sheets,
contain one or more embedded style sheets, and make use of inline styles. In the process, it
is quite possible that some rules will conflict with one another. CSS uses a mechanism called
the cascadeto resolve any such conflicts and arrive at a final set of styles to be applied to the
document. Two key components of the cascade are specificityand inheritance.
Specificity Calculations
Specificity describes the weight of a selector and any declarations associated with it. The fol-
lowing table summarizes the components of specificity summation.
Selector type
Example
Specificity
Universal selector
*
0,0,0,0
Combinator
+
Element identifier
div
0,0,0,1
Pseudo-element identifier
::first-line
Class identifier
.warning
0,0,1,0
Pseudo-class identifier
Attribute identifier
:hover
[type="checkbox"]
ID identifier
#content
0,1,0,0
Inline style attribute
style="color: red;" 1,0,0,0
Specificity values are cumulative; thus, a selector containing two element identifiers and a
class identifier (e.g., div.aside p ) has a specificity of 0,0,1,2 . Specificity values are sorted
in right-to-left precedence; thus, a selector containing 11 element identifiers ( 0,0,0,11 ) has a
lower specificity than a selector containing just a single class identifier ( 0,0,1,0 ).
The !important directive gives a declaration more weight than nonimportant declarations.
The declaration retains the specificity of its selectors and is used only in comparison with oth-
er important declarations.
Search WWH ::




Custom Search