Portugues
CSS Diner
Saved games stay in this browser only.
About the game
CSS Diner is a puzzle game for learning CSS selectors, the part of CSS that says which elements of a web page a rule applies to. The setting is a restaurant: a table is laid with plates, bento boxes, apples, oranges and pickles, and every level is an order that reads something like "select the small apples" or "select the apple on the plate". You answer by typing a selector, and the items it matches start to bounce. Pick exactly the right ones and the order is served; pick too many or too few and nothing happens.
The game has 32 levels, and each one introduces a single new kind of selector.
It begins with the basics, the tag name, the id and the class, then moves on to
selecting things inside other things (descendants and direct children), things
next to each other (adjacent and general siblings) and several elements at once
with the comma and the universal selector. The second half is about position
and state: first, last and only child, the nth-child family with numbers,
even and formulas such as 2n+3, the same ideas by element type, empty
elements, negation with :not(), and attribute selectors that match the start,
end or middle of a value.
Playing it here
Click Play and the first order appears at the top of the left column. Type your selector in the editor below the table and press Enter, or click the enter button. The panel on the right explains the selector you are learning, with its syntax and a few examples, and it is worth a read when you are stuck; the "Help, I'm stuck" link on the left shows an introduction to selectors. The HTML of the table is shown next to the editor, and hovering over an item of the table shows its markup, which is the clue you need to write the selector.
Your progress is kept in your browser, with a check mark next to every level you solved, so you can close the page and come back. The game is in English only.
Controls
| Input | Action |
|---|---|
| Keyboard | type a CSS selector in the box |
| Enter | try the selector |
| Mouse over an item | show its HTML markup |
| Arrows and level list (right) | go to the previous or next level, or any level you have reached |
| A number in the box + Enter | jump to that level |
| Esc | close the level list |
A few things worth knowing
Look at the markup. The table drawn on screen is made of real elements: the HTML viewer lists them and hovering over an item shows its tag and class. The selector you write is matched against that markup, not against the picture.
Shorter is fine. Several selectors solve most levels. The game only checks that the items you picked are exactly the right ones.
Positions count differently. nth-child counts all the children of a
parent, while nth-of-type counts only the ones with the same tag. Several
levels are built around that difference.
Do not worry about the order. You can go back to a solved level and try a different selector, and the level list lets you skip ahead to a topic you already know.
Credits and licence
CSS Diner was created by Luke Pacholski. It is released under the Mozilla Public License 2.0, which covers the game's code, styles and images. The game is served as the author published it, except for a few changes of ours: the analytics, the share buttons, the links to other sites and the web fonts loaded from Google were removed, and one small script (jQuery Mousewheel) now comes with the game instead of being fetched from a content network, so that nothing is requested from other websites. It also contains jQuery, jQuery Mousewheel and the malihu custom scrollbar (MIT licence) and the fonts Exo 2 (SIL Open Font License) and Satisfy (Apache 2.0). The licence texts, the original source and our changes are linked from this page.