CSS Diner
Pick items off a dinner table using CSS selectors
In CSS Diner, a table is set with plates, apples, pickles and other items. In each level, you type a CSS selector to pick exactly the items the game asks for. If your selector is right, you move on to the next level. You can hover over the items to see the HTML behind them.
Free · No login · Browser · Beginner
About CSS Diner
The levels start with simple type, class and ID selectors and move on to combinators, pseudo-classes such as nth-child, and attribute selectors. It suits beginners and anyone who wants a quick refresher.
It runs in the browser with no sign-up, and you can jump to any level or reset your progress.
On Breakpoint since 23 Oct 2026.