Home

CSS Specificity

Resources:

  1. https://dev.to/emmawedekind/css-specificity-1kca
  2. https://specificity.keegan.st/
  3. https://specifishity.com/

How to calculate

AttributeValue
Inline Style(1,0,0,0)
ID(0,1,0,0)
Class, Pseudo-Class, Attribute(0,0,1,0)
Elements(0,0,0,1)

Example A

ul > li { ...; } .list > .list-item { ...; }

Here we have ul > li with (0,0,0,2) and .list > .list-item with (0,0,2,0), so the latter is prioritised.

Example Two

div#div > a:hover { ...; } a:nth-child(2):hover { ...; }

Here div#div > a:hover has (0,1,1,2) and a:nth-child(2):hover with (0,0,2,1) and so the first selector would be used.

Final Example

body #content .data img:hover { ... } = (0,0,0,1) + (0,1,0,0) + (0,0,1,0) + (0,0,0,1) + (0,0,1,0) = (0,1,2,2)

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/css/css-specificity

Sections


Related