CSS Speedrun

A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.

https://css-speedrun.netlify.app

Setup

• Install the app with npm i
• run npm run build to create the dist directory
• run npm run watch to run the dev server and watch for changes

Create your own puzzles

To create your own puzzles check the files in /src/js/puzzles.

They contain the code for the puzzle and an array to mark which lines should be selected. Also you can provide an optional hint to help others solve your puzzle.

Solutions

Answer list:

Intro: li:first-child

• Level 1: p:not(.foo)
• Level 2: li:nth-child(2n + 3)
• Level 3: div > *
• Level 4: span[data-item]
• Level 5: p ~ span
• Level 6: :enabled
• Level 7: #one, #two, #five, #six, #nine
• Level 8: a + span
• Level 9: #foo > .foo
• Level 10: div div span + code:not(.foo)

License

MIT

---

created by Vincent Will