


Precedence and specificity are two very important words in CSS.
These words refer to the way that something is written, for instance in propositional logic:
A ∧ B ∨ C
Would evaluate to:
(A ∧ B) ∨ C
AND will always take precedence over OR even without brackets which means the statement
false ∧ true ∨ true
will evaluate to true.
Precedence has a huge role in a lot of different languages. CSS is no different, except that it refers to something called specificity.
Specificity is a feature of CSS that is calculated on each element to decide what properties to apply to it.
For example, an element given a class is given a higher specificity than an element without a class.
To calculate the specificity of an element:
This information was sourced from WDG's guide.
The following table shows some examples:
# | Type | Example | Points | Calculation |
---|---|---|---|---|
1 | Everything (default) | * { } | 0 | 0 |
2 | Tag selection | p { } | 1 | 1 |
3 | Tag selection followed by a pseudo-selector | p:first-letter{ } | 2 | 1 + 1 |
4 | Descendant selector | div p { } | 2 | 1 + 1 |
5 | Descendant selector followed by adjacent sibling selector | div p+div { } | 3 | 1 + 1 + 1 |
6 | Attribute selector | [href=$jamie] { } | 10 | 10 |
6 | Element with an attribute selector applied to it | a[href=$jamie] { } | 11 | 1 + 10 |
7 | Element adjacent to another element with a type applied to it | h1 + a[href=jamie] { } | 12 | 1 + 1 + 10 |
8 | Class | .clear { } | 10 | 10 |
9 | Class of element | p.clear { } | 11 | 1 + 10 |
10 | Element followed by a class of element | div p.clear { } | 12 | 1 + 1 + 10 |
11 | ID | #identifier { } | 100 | 100 |
12 | ID with a child element | #identifier p { } | 101 | 100 + 1 |
13 | ID with child class | #identifier .clear { } | 110 | 100 + 10 |
14 | ID with a child class of element | #identifier p.clear { } | 111 | 100 + 1 + 10 |
15 | ID with a child class of element containing an element | #identifier p.clear a { } | 112 | 100 + 1 + 10 + 1 |
16 | Inline style (style attribute) | <div style="background:green;"></div> { } | 1000 | 1000 |
17 | !important | {background: red !important;} | ∞ | ∞ |
This list was originally inspired by the Smashing Magazine's list.
Calculations are figured out by ordering based on what comes first.
For a singular tag selection, such as of type p
, a 1 is used. This is shown in example 2.
For two elements, 2 is used. This is calculated as 1 + 1 because two singular elements form this. Pseudo-elements count as elements also. This is shown in example number 3 and 4.
When applying an attribute selector or a class the element is given 10 points immediately. This is shown in example 6 and 8.
When an element is given an attribute selector or a class it is given 11 points, 1 for the element and 10 for the selector or class. This is shown in example 7 and 9.
An ID is given a full 100 points. This is shown in example 11.
An ID with a child class within it, such as with example 13, is given 110 points - 100 for the ID and 10 for the class.
The HTML style
attribute is given 1000 points.
Absolutely everything however is overruled by the CSS !important
rule which is given ∞ points.
For calculating this, there is a fantastic calculator provided by Keegan Street found here.
Examples
The below example questions give answers in the form:
#ex p.clear = ID ElementClass
Remember, pseudo-elements also count as an Element.
![]() | Happy New Year everyone! #2021NewYear 21 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 21 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 21 days ago |