Skip to main content Accessibility Feedback

CSS selectors and specificity explained

For a lot of developers, one of the most confusing things to really wrap your head around is how CSS selectors and specificity work in the context of “the cascade.”

A screenshot of Hugo Giraudel's Selectors Explained tool

One of my students tipped me off to “Selectors Explained” by Hugo Giraudel.

This awesome little web app accepts any valid CSS selector, and explains what it means in plain English. It also provides a specificity number, so that you can compare the specificity of different selectors.

For example, this:

.hello#there [data-friend="carl"]

Gives this explanation:

An element with an attribute data-friend whose value is carl somewhere … within the element with id there and class hello. Specificity: 1.2.0

This is neat!