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.”
One of my students tipped me off to “Selectors Explained” by Kitty 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.
.hello#there [data-friend="carl"]
Gives this explanation:
An element with an attribute
data-friend
whose value iscarl
somewhere … within the element with idthere
and classhello
. Specificity: 1.2.0
This is neat!