HTML and CSS Reference
In-Depth Information
• footer nav li:last-child
a=0, b=0, c=1, d=3 → 0013
•
#sidebar input:not([type="submit"])
a=0, b=1, c=1, d=1 → 0111
(Note that the negation pseudo-class doesn't count, but the selector
inside it does.)
If you'd rather learn this in a more fun way, Andy Clarke drew a clever
analogy between specificity and Star Wars back in 2005, which certainly
made it easier for Star Wars fans to understand specificity. Another good
explanation is “CSS Specificity for Poker Players,” though slightly more
complicated.
Andy Clarke's CSS Specificity Wars chart.
