CSS Diner
It’s a fun game to learn and practice CSS selectors

Solutions

Level 1

plate {}

Level 2

bento {}

Level 3

#fancy {}

Level 4

plate apple {}

Level 5

#fancy pickle {}

Level 6

.small {}

Level 7

orange.small {}

Level 8

bento orange.small {}

Level 9

plate, bento {}

Level 10

* {}

Level 11

plate * {}

Level 12

plate + apple {}

Level 13

bento ~ pickle {}

Level 14

plate > apple {}

Level 15

orange:first-of-type {} // Proposed way :first-child

Level 16

plate :is(apple, pickle) {} // Proposed way :only-child

Level 17

:is(apple, pickle).small {} // Proposed way :last-child

Level 18

plate:nth-child(3) {}

Level 19

bento:nth-last-child(3) {}

Level 20

apple:first-of-type {}

Level 21

plate:nth-child(even) {}

Level 22

plate:nth-child(2n+3) {}

Level 23

apple:only-of-type {}

Level 24

:is(orange, apple):last-of-type {}

Level 25

bento:empty {}

Level 26

apple:not(.small, .medium) {}

Level 27

[for] {}

Level 28

plate[for] {}

Level 29

[for="Vitaly"] {}

Level 30

[for^="Sa"] {}

Level 31

[for$="ato"] {}

Level 32

[for*="obb"] {}