Skip to content
CSS JavaScript HTML
Branch: develop
Clone or download
Latest commit 566aaa0 Nov 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Lots of little fixes and adjustments while QAing. Sep 26, 2016
images Lots of little fixes and adjustments while QAing. Sep 26, 2016
js fix minor typo (remove extraneous 'of') Aug 14, 2017
.gitignore Added attribute selectors Sep 23, 2016
LICENSE Adding MPLv2 license. Jun 10, 2014 Updated the instruction text on level 13. Oct 8, 2016 minor typo Jul 2, 2017
favicon.png + favicon Feb 13, 2014
index.html minor typo Jul 20, 2018

Welcome to CSS Diner

It's a fun game to learn and practice CSS selectors.

To play, visit or

Change Log

Aug 25,2016

  • Added Twitter, Facebook and Email share actions
    • Tracking clicks with GA Events
  • Made the level menu and editor area scroll independently
    • Using custom jQuery scroll library

Aug 18,2016

  • Started using to redirect to

Aug 12,2016

  • Added checkmarks to completed levels in level menu and header

Aug 4,2016

  • Began tracking progress and correct guesses with GA Events

Filing issues and PRs

Please file issues and PRs in the css-diner repo.

Repo structure

Here's the repo structure, it's a bit confusing...

  • Currently, all of the working code (including issues, PRs and in-progress branches) is hosted in the css-diner repo
    • The lastest version of the code is on the develop branch
  • The live version is published from the repo
    • Live version lives on the master branch


This is more of a note to myself in case I forget, to deploy the latest version, I'll have to push to the master branch on the repo from the latest develop branch.

Roadmap and Status

Potential Features & Improvements

  • Lots of people have trouble with level 19, how should I address this?
  • Create levels for attribute selectors
    • Will probably add attributes like customer='bob' and place a little nametag by those dishes
    • Also some great ideas in this issue
  • Figure out how to tackle the .table element
    • Including it in the selector string makes the selectors invalid, but it shouldn't
  • Investigate the order of stacked oranges in the markup, some users think it's counter intuitive
  • Block attempts to use comma between selectors
  • Only pass each level if that level's selector is used
  • Make it easier to navigate between levels
  • Number all of the levels in the menu
  • Add UI to Tweet about finishing all of the levels
  • Add additional challenges per Selector
    • Some repetition per level would be good

Special Thanks

You can’t perform that action at this time.