DONT ADD ANYTHING HERE!

  1. Count the number of id selectors in the selector (=a)
  2. Count the number of
    1. class selectors
    2. attribute selectors
    3. pseudo-classes
    in the selector (=b)
  3. Count the number of type selectors and pseudo-elements in the selector (=c)
  4. Concatenate the three numbers a b c to get the specificity.
  5. Ignore the universal selector
  6. Selectors inside the negation pseudo-class are counted like any other
  7. Negation itself does not count as a pseudo-class.

Example

  1. li.class:nth-of-type(3n)
    1. 0 2 1
    2. Selector specificity is 21
  2. #myDiv li.class a[href]
    1. 1 2 2
    2. Selector specificity is 122

Notes

  1. Specificity is the algorithm that the browser uses to decide which property value is applied to an element (MDN)

References