News

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.

Thomas Park

@thomashpark

Thomas is the founder of Codepip, and the designer of Flexbox Froggy and Grid Garden. Before Codepip, he worked as a computing education and human-computer interaction researcher at Drexel University's College of Computing and Informatics. He has also worked at the Mozilla Foundation and is involved in numerous open source web projects.

Get the latest updates

Enter your email to hear about new games and exclusive offers.

You can unsubscribe at any time.