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