CSS Diner로 css 기본문법 잡기

https://flukeout.github.io/

CSS Diner

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"]