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:

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.