CSS Diner
CSS Diner teaches selectors by setting a table. Plates, apples, pickles and bento boxes sit in a row, the ones you need to pick wiggle, and you type a CSS selector that grabs exactly those items.
Luke Pacholski built it as an open-source teaching game, and it works in a regular browser tab, which makes it a good fit for a coding class on school laptops. There are 32 levels, from plain element names to tricky pseudo-classes.
How to play CSS Diner
The table fills the top of the screen. Below it, a CSS editor waits on the left and an HTML viewer on the right shows the markup behind every item. Hover over a dish or a line of code to see how the two match up.
Type a selector and press Enter. If it picks exactly the wiggling items and nothing else, they fly off the table and the next level loads. If not, the editor gives a little shake, and nothing is lost by guessing again.
The side panel explains each new idea with an example, such as the id selector, the descendant selector or nth-child. Use the arrows by the level title or the level menu to move around freely.
Controls
| Action | Keyboard | Mouse | Touch |
|---|---|---|---|
| Type a selector | Type in the CSS editor | — | — |
| Check the answer | Enter | Click the enter button | — |
| Inspect an item | — | Hover over it or its HTML line | — |
| Change level | Type a level number, then Enter | Use the level arrows or menu | — |
| Close the menu | Esc | — | — |
Tips
- Read the HTML viewer before typing. The tag names and classes there are the words you get to use.
- Your answer does not need to match the example. Any selector that picks the same set of items is accepted.
- Remember that a space means inside. Plate apple finds apples sitting on plates, while plate, apple picks both kinds.
- For the nth-child levels, count from 1, not 0, and look at all siblings, not just the ones of one type.
- When stuck, hover over each wiggling item to compare its markup with the items that stay still.
If you like CSS Diner, try these
Flexbox Lily PondTyping real CSS remains the task, using flexbox properties to move frogs onto matching lily pads.
SQL Detective MysterySelecting the right items carries over to databases, where SQL queries reveal who committed the crime.
Questions
Does CSS Diner save my progress?
Yes. Your current level and the levels you have finished are stored in the browser. Solved levels get a check mark in the menu, and Reset Progress clears them.
Is CSS Diner good for complete beginners?
Yes. The first levels only ask for a tag name like plate, and every level has a short explanation and example on the side, so you learn one idea at a time.
Can I play CSS Diner on a tablet?
You can type with an on-screen keyboard, but the hover previews need a mouse and the layout wants a wide screen. A laptop or Chromebook is more comfortable.
More like this: all puzzle games · every game A–Z
