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 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.
Gives this explanation:
An element with an attribute
data-friendwhose value is
carlsomewhere … within the element with id
hello. Specificity: 1.2.0
This is neat!