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 buildto create the dist directory - run
npm run watchto 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
created by Vincent Will