Understanding Cascading Style Sheet (CSS) Selector specificity
CSS uses the concept of specificity to resolve conflicts that result from the existence of more than one selector targeting a given element. Specificity on CSS 2.1 is denoted and calculated using a four (4) digit notation written as x,y,z,q with each digit level standing for a different level and quantity of specificity.
Using the above markers (x,y,z,q):
x - Represents the existence of inline style information; and this declaration overrides any other information that may be selecting the element
y - Represents the number of ID selectors that are targeting the element in question
z - Represents the class and pseudo-class level of specificity targeted at the element
q - Represents the element level declarations targeted at the element
Beyond the above-detailed approach to specificity is the use of !important notation to override all non-important selectors. This creates a tri-level system of classifying selectors that targeting an element. In order of ovrriding importance are:
- in-line styles
- !important selectors
- non-important selectors
The specificity of selectors is first computed within the above-three groups and then the winning selectors are compared among each other with the in-line, !important, and non-important order of specificity determining the definitive winning selector that will be implemented.
Within each of the above three groups, specificity is computed as illustrated by the following example.
XHTML Markup
<div id="content51" class="summary">This is summary content in XHTML markup</div>
CSS
In-line CSS
<div id="content51" class="summary" style="color: #fco;">summary content</div><!-- overriding specificity 1,0,0,0 -->
Like the conventional index notation, the higher the numbers to the left, the more powerful the specificity; such that a selector with
body div p span em {color: #f00;} /*Specificity= 0,0,0,5*/
is still weaker than the below selector
#content51 {color: #00f;} /*Specificity= 0,1,00 Winner*/
!important Selectors
#content51 {color: #f00 !important;} /*Specificity= 0,1,0,0*/
div#content51 {color: #00f !important;} /*Specificity= 0,1,0,1 Winner*/
.summary {color: #0f0 !important;} /*Specificity= 0,0,1,0*/
Non !important Selectors
body div#content51 {color: #ff0000;} /*Specificity= 0,1,0,2 Winner*/
body #content51 {color: #ff0000;} /*Specificity= 0,1,0,1*/
Universal selectors
universal selectors do not have any weight as far as specificity is concerned, although it has an underlying effect in CSS inheritance.
NB: A proper understanding of CSS Selector specificity as well as Cascade and Inheritance are instrumental to mastering and controlling the layout and presentation of your XHTML markup using Cascading Style Sheets (CSS).
