CSS Diner로 css 기본문법 잡기
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
CSS를 처음 접한다면, 부담스럽지 않고 쉽게 접근해 기본적인 문법을 배울 수 있습니다.
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-child
Level 16 : plate *:only-child
Level 17 : .small: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-of-type(even)
Level 22 : plate:nth-of-type(2n+3)
Level 23 : apple.small:only-of-type
Level 24 : .small:last-of-type
Level 25 : bento:empty
Level 26 : apple:not(.small)
Level 27 : [for]
Level 28 : plate [for]
Level 29 : [for="Vitaly"]
Level 30 : [for^=S]
Level 31 : [for$="o"]
Level 32 : [for*="bb"]