Announcing Selector Showdown: A game for learning about CSS selector specificity
Selector Showdown is a new game from Codepip for learning all about CSS selector specificity.
In the game, two CSS selectors are pitted against each other in a showdown. It’s up to you to judge which one has greater specificity. Get it right and you rank up to the next level. Get it wrong and you get demoted. Learn about CSS selector specificity along the way and try to reach the summit.
Concepts that are introduced in the game include how elements, classes, IDs, pseudoelements like ::first-line
and ::before
, pseudoclasses like :hover
, combinators like +
and >
, and the universal selector *
affect specificity. You’ll also learn what happens in the event of a tie, the key difference between the new :is()
and :where()
pseudoclasses, and the three-digit notation many developers use to calculate a specificity score. One or two fun little specificity hacks will also be shared.
The “C” in CSS stands for “cascading”, referring to how multiple style rules that can apply to a single HTML element. Which style wins out is determined by the specificity of each rule. Whether you’ve ever been confused why one of your CSS rules isn’t taking effect, or just wanted to write cleaner and more concise CSS code, Selector Showdown is the game for you.