HTML and CSS Reference
In-Depth Information
Understanding the Scoring
Now that you've witnessed the effects of specificity firsthand, let's examine the parts that make
up the specificity score for each of the selectors used in our examples (see Table 3-1, adapted
from http://molly.com/2005/10/06/css2-and-css21-specificity-clarified/ ).
Table 3-1. Calculating Selector Specificity
Inline
# of ID
# of Class
# of Element
Selector
Style
Selectors
Selectors
Selectors
h1
0,
0,
0,
1
p
0,
0,
0,
1
div h1
0,
0,
0,
2
div p
0,
0,
0,
2
div.module h1
0,
0,
1,
2
div.module p
0,
0,
1,
2
div#content h1
0,
1,
0,
2
div#content p
0,
1,
0,
2
The selectors in Table 3-1 are listed in order from lowest specificity to highest, top to bot-
tom. The score is the total number of a given selector type within each combined selector.
Note When calculating specificity, remember that attribute selectors and pseudo-classes are counted as
classes, and pseudo-elements are calculated as elements.
It's important to think of these scores in columns; thus, commas should be used to sepa-
rate the individual scores when writing them out inline (as opposed to the tabular form above)
rather than combining the numbers into base-10 (e.g., “11” or “111”), because it's possible
(although unlikely) to have more than nine matches in a given column (e.g., 0,0,1,12). Using
comma-delimited notation to keep score will help reduce any possible confusion (and when it
comes to specificity, there's lots of confusion to be had—beware of the many resources avail-
able on the Web that describe specificity using base-10, for their authors are living reckless
and dangerous lives). For a downright fun example, check out Malarkey's (Andy Clarke) Star
Wars specificity chart ( www.stuffandnonsense.co.uk/archives/css_specificity_wars.html ).
Note The universal selector ( * ) has a value of 0 when used within a combined selector (such as
#content * p , which targets any <p> elements that are grandchildren of #content ), or a score of 0, 0, 0, 0
when used on its own. Basically, its use doesn't affect the score one bit.
Search WWH ::




Custom Search