Interactive Demo Makes CSS Specificity Click
CSS specificity can be a tough concept to wrap your head around. A helpful way to approach it is to think in terms of “what beats what” — or, put differently, how strong a given selector is. Manuel Matuzovic has put together an interactive step-by-step demo that walks you through the idea in a hands-on way.
You keep hitting the “Add selector” button, and the CSS shown — and applied to the page — shifts with ever-stronger selectors targeting the body element, which changes its background-color as a result. The demo eventually veers into not-really-selectors trickery, like using @keyframes to override things, which makes for a nice surprise twist.
For those who want a primer before diving in, there’s the CSS specificity deep dive to get started. And if you’re looking to get ahead of the game, you should also be aware of CSS Cascade Layers.
More specificity practice
If the trickery at the end of Matuzovic’s demo piques your interest, check out Francisco Dias’ A Specificity Battle!, a piece we published a few years back that stages a back-and-forth styling battle with nineteen steps all “selecting” the same element to re-style it. CSS can be a wild ride sometimes.
