To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Precedence and specificity

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:

  1. Count the number of ID attributes in the selector and give it 100 for each.
  2. Count the number of CLASS attributes in the selector and give it 10 for each.
  3. 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.

Examples

The below example questions give answers in the form:

#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

Click here to show the answers.

Provide feedback on this page
Comments are sent via email to me.