Hi all,
I received some questions regarding specificity of CSS selectors. I try to give a very short explanation here.
Examples:
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,
Leo