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
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:
- Count the number of ID attributes in the selector and give it 100 for each.
- Count the number of CLASS attributes in the selector and give it 10 for each.
- Count the number of HTML tag names in the selector and give it 1 for each.
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.
For this exercise, give your answers in the following format:
#ex p.clear = ID ElementClass
Remember, pseudo-elements also count as an Element.
- Give an example of a selection scope with a specificity value of 101.
- ID Element
- Give an example of a selection scope with a specificity value of 3.
- Element Element Element
- Calculate the specificity value of p + #contents
- 1 + 100 = 101
- Calculate the specificity value of p > .clear
- 1 + 10 = 11
- Calculate the specificity value of p > *
- 1 + 0 = 1
