CSS Specificity Hierarchy
There is a very good article talking about CSS Specificity Hierarchy. Here I extract key part from the article for quick retrieving:
Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:
- 1. Inline styles (Presence of style in document).
- An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style=”color: #fff;”>
- 2. IDs (# of ID selectors)
- ID is an identifier for your page elements, such as #div.
- 3. Classes, attributes and pseudo-classes (# of class selectors).
- This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
- 4. Elements and pseudo-elements (# of Element (type) selectors).
- Including for instance :before and :after.
How to measure specificity
- Memorize how to measure specificity. “Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in
body #content .data img:hover
the specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.”
- Alternative way: “Count the number of ID attributes in the selector (= a). Count the number of other attributes and pseudo-classes in the selector (= b). Count the number of element names and pseudo-elements in the selector (= c). Concatenating the three numbers a-b-c gives the specificity.
Here is extracted from other article: http://css-tricks.com/specifics-on-css-specificity/:
CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.
- If the element has inline styling, that automatically wins (1,0,0,0 points)
- For each ID value, apply 0,1,0,0 points
- For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
- For each element reference, apply 0,0,0,1 point
You can generally read the values as if they were just a number, like 1,0,0,0 is “1000”, and so clearly wins over a specificity of 0,1,0,0 or “100”. The commas are there to remind us that this isn’t really a “base 10” system, in that you could technically have a specificity value of like 0,1,13,4 – and that “13” doesn’t spill over like a base 10 system would.