CSS Diner

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

1. plate
2. bento
3. #fancy
4. plate>apple 또는 
plate apple
5. #fancy>pickle 또는 
#fancy pickle
6. .small
7. orange.small
8. bento>orange.small 또는
bento orange.small
9. plate,bento
10. plate>* 또는
apple,plate,bento,#fancy,.small,bento>orange
11. plate>* 또는
plate>orange,plate>pickle,plate>apple
12. plate+apple
13. bento~pickle
14. plate>apple
15. orange:first-child 또는
orange:nth-of-type(1)
16. plate>apple,plate>pickle 또는
plate apple:only-child,plate pickle:only-child
17. #fancy>apple,pickle 또는
.small:last-child
18. plate:nth-of-type(3)
19. bento:nth-of-type(1) 또는
bento:nth-last-child(3) [의미: 벤토에서 뒤에서 세번째]
20. apple:nth-of-type(1) 또는
apple:first-of-type
21. plate:nth-of-type(2n)
22. plate:nth-of-type(3),plate:nth-of-type(5) 또는
plate:nth-of-type(2n+3)
23. plate:nth-of-type(2)>apple 또는
apple:only-child
24. orange:nth-of-type(2),apple:nth-of-type(2) 또는
orange:last-of-type,apple:last-of-type
25. bento:empty 또는
bento:nth-of-type(1),bento:nth-of-type(3)
26. apple:not(.small)
27. [for] [attribute:특성선택자]
28. plate[for]
29. bento[for="Vitaly"]
30. [for^="Sa"]
31. [for$="ato"]
32. [for*="obb"]