CSS Selector Specificity - Explanation

Hi all,
I received some questions regarding specificity of CSS selectors. I try to give a very short explanation here.


Selector               ID     Class     Type      Weight
h1 {....}              0      0         1         0-0-1
#wrapper h1 {.....}    1      0         1         1-0-1
.page h1 {.....}       0      1         1         0-1-1

With these examples you can see, that selector 2 is the “heaviest” and selector 1 the “lightest”. So if you need more weight just add an ID or a class or both to the selector and you can override rules with less specificity.

For testing purposes you can use !important to check whether you targeted the right rule. But please don’t use it in production - it’s just bad habit.

Hope this helps a bit,

Thanks Leo, that’s a great visual example. Appreciate the help and I’m sure others do as well.