NML

CSS specificity

Specificity is one of the most difficult concepts to grasp in CSS. If you have ever spent time wondering why your CSS rules are being ignored by the browser it is likely that they are being over-written by a more specific selector.

1* { }0
2li { }1 (one element)
3li:first-line { }2 (one element, one pseudo-element)
4ul li { }2 (two elements)
5ul ol+li { }3 (three elements)
6h1 + *\[rel=up] { }11 (one attribute, one element)
7ul ol li.red { }13 (one class, three elements)
8li.red.level { }21 (two classes, one element)
9style=””1000 (one inline styling)
10p { }1 (one HTML selector)
11div p { }2 (two HTML selectors)
12.class10 (one class selector)
13div p.class { }12 (two HTML selectors and a class selector)
14#id100 (one id selector)
15body #id .class p { }112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)