CSS Diner Unblocked

CSS Diner makes one of the trickiest parts of web design feel like waiting tables. A little restaurant scene lays out dishes, lunch boxes and a few kinds of fruit and pickle, and an order appears at the top asking for something specific. You fill the order by typing the CSS selector that would target them if this were a real web page. The table is made of real HTML elements, so your answer is tested on live markup rather than compared to a text answer. Luke Pacholski’s teaching game plays unblocked here.

Filling Each Order

Whatever the order wants is wiggling on the table. Under the table, the HTML Viewer lists the markup for everything you can see. On the right, a help panel explains the selector being taught, with its syntax and a few examples.

Enter your answer in the editor box. Get exactly the wiggling items and they are whisked away, a tick appears beside that level and a new order comes in. Grab extra items, miss some, or mistype, and the editor shakes. There is no penalty for trying again.

The 32 levels are grouped in a sensible order:

1. Basics: tag names, IDs and class names, alone and combined
2. Grouping and nesting: descendants, comma lists and the * wildcard
3. Relationships: the +, ~ and > combinators
4. Pseudo-classes: child and type positions such as :first-child, :last-child and :nth-of-type, plus :empty and :not()
5. Attributes: plain attribute selectors, then ^=, $= and *=

Level 32 is the end of the menu.

CSS Diner controls

To do this	Keyboard	Mouse
Write your selector	Type in the CSS Editor box	—
Submit the answer	Enter	Click the "enter" button
Go straight to a level	Type the level number, then Enter	Open the menu (top right) and click a level
Reveal an item's markup	—	Hover over an item on the table or a line in the HTML Viewer
Step back or forward a level	—	Click the arrows beside the level title
Hide the level list	Esc	—

Tricks That Save Time

Trust the markup, not the picture. The order describes the goal in plain words, but the HTML Viewer shows which tags, classes and IDs actually exist. Read it before typing.

Hover to connect the two views. Hovering over a dish lights up its markup, and hovering over the markup lights up the dish. It is the quickest way to find what you need.

Space versus greater-than. bento orange finds an orange anywhere inside a bento box, however deep. bento > orange only matches an orange sitting directly in it. Many wrong answers come from this.

nth counts from one. :nth-child(2) is the second child, not the third. Formulas like 2n+1 step through every other element.

Borrow from the examples. The help panel’s examples are written in the exact pattern the level wants. Swap in the right tag or class instead of starting from nothing.

Best on a Laptop

The two-column layout and the hover tooltips work best with a mouse and a full keyboard, so a laptop or desktop is the natural fit. Once selectors make sense, CSS Grid Carrot Patch teaches page layout the same playful way, and Flexbox Lily Pond covers flexbox.