CSS Diner — css practice with CSS selectors

Tool powered by CSS Diner on Luke Pacholski.

Play CSS Diner on flukeout.github.io: css practice through selector puzzles on a bento table—type selectors, advance levels, learn CSS.

What is CSS Diner?

CSS Diner at flukeout.github.io is a free css practice game by Luke Pacholski (@flukeout). You write CSS selectors to pick the correct items on a bento-style table while the game shows the underlying HTML. Each level introduces selector syntax—from element and class selectors to attributes, pseudo-classes like :nth-child, and combinators. When your selector matches every required plate, you advance.

CSS Diner tips for selector practice

Use these habits to progress faster and carry selector fluency into stylesheets and DevTools.
  • 01

    Hover the table to read HTML structure

    Each plate maps to markup in the DOM preview. Read parent and child relationships before you type—most css diner mistakes come from skipping structure.

  • 02

    Start with the smallest valid selector

    Prefer one precise selector over chaining guesses. Over-broad selectors highlight extra plates and fail the level even when the target is included.

  • 03

    Learn :nth-child patterns level by level

    Odd, even, and n+ formulas appear in later rounds. Write the pattern on paper once, then reuse it in DevTools when debugging lists and tables.

  • 04

    Use the in-game help panel before searching answers

    The right-hand help on flukeout.github.io explains syntax for the current level. It is the intended path when people search css diner answers—learn the rule, not only the solution string.

  • 05

    Jump to a level with a comment when revising

    On the publisher site, type a level number in the editor comment area (for example, 5) to reopen a specific puzzle during css practice review.

  • 06

    Mirror selectors in real stylesheets

    After a session, recreate one selector in a small HTML file or CodePen. Repetition outside the game locks in css selector practice faster than streaking new levels only.

Compare CSS learning games

CSS Diner teaches selectors on a bento-themed table. These related games cover flexbox layout and vector skills when you want a different kind of css practice session.

GamePrimary skillSyntax focusOn Uwarp
CSS DinerTarget DOM nodes with CSS selectors on a bento tableSelectors, pseudo-classes, combinatorsPlay
Flexbox FroggyPosition frogs with flexbox alignment propertiesflex-direction, justify-content, align-itemsFlexbox Froggy
The Boolean GameVector boolean operations on shapesUnion, subtract, intersect, differenceBoolean game

After CSS Diner practice

Continue css practice with layout games and animation references .

  1. Learn flexbox with Flexbox Froggy: Open /flexbox-froggy when selectors feel solid but layout properties do not—ten levels from Codepip on flex-direction, justify-content, and align-items.

  2. Browse CSS animation references: Use /animate-style or /animista when you want motion classes after mastering static selector syntax.

  3. Pair with design games: See /tools/games for vector trainers, color games, and UX quizzes that complement frontend learning.

  4. Open the full game for level jumps: If the player limits editor comments, play at https://flukeout.github.io/ in a full tab for level selection and saved progress.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.