CSS Master · Selectors

Selector Quest — CSS selectors game

Every chamber of the vault is real markup. Read the riddle, write the CSS selector that picks exactly those things, and Ves casts it. The browser's own selector engine decides what gets hit.

0/ 54
easyChamber 1 of 18

The flask room

“Glass that holds a brew, wherever it stands. Shatter all of it.”

A type selector is just the tag name. flask matches every <flask> element in the document, at any depth.

spell.css
Matches show up live as you type · 0 to banish
your matchtargetmisfires 0
chamber.htmlhover a line to find it
1<vault>
2  <shelf>
3    <flask class="red"></flask>
4    <gem class="blue"></gem>
5    <flask class="green"></flask>
6  </shelf>
7  <chest>
8    <scroll></scroll>
9    <flask class="amber"></flask>
10  </chest>
11</vault>

About Selector Quest

Selector Quest is a CSS game for selectors and specificity. Type real selectors; the browser’s engine decides if the vault opens. Eighteen chambers from basics to :has().

What you practice

FAQ

What is Selector Quest?
Selector Quest is a free CSS selectors game on Playhire. Each vault wants a precise selector; you write it, and the page’s own query engine checks the match.
Does Selector Quest teach modern CSS selectors?
Yes — including :has(), :not(), :empty, attribute operators and specificity duels, not only beginner class and id selectors.
Are these CSS Flexbox games free?
Yes. Every Playhire CSS game — Flex Escape, Flex Strike, Blueprint, Drone Dock and more — is free to play in the browser. Sign in only if you want XP, leaderboard rank and certificates.
Do I need to install anything to play a CSS game?
No. Open the game in your browser, write real CSS, and see the layout update instantly. No npm install, no signup required to start.

More CSS games