CSS 선택자 연습 참고 사이트 [CSS Selector][CSS 연습]

https://flukeout.github.io/ 접속하d여 1단계부터 32단계 까지 CSS Selector 연습할 수 있다. Level 1~32까지의 문제가 있으며, 문제를 풀기위한 설명이 오른쪽영역에 설명되어있다. 

자세한 내용은 아래 영상을 참조

CSS Diner 해답 (마우스로 아래 영역을 긁으세요)

#01 plate

#02 bento

#03 #fancy

#04 plate > apple

#05 #fancy pickle

#06 .small

#07 orange.small

#08 bento > orange

#09 plate, bento

#10 *

#11 orange.small, pickle, plate > apple

#12 plate + apple

#13 bento ~ pickle

#14 plate > apple

#15 plate orange:first-child

#16 plate *:only-child

#17 #fancy *:last-child , plate + pickle

#18 plate:nth-child(3)

#19 bento:nth-last-child(4)

#20 apple:first-of-type

#21 plate:nth-of-type(2n)

#22 plate:nth-of-type(2n+3)

#23 plate apple.small:only-of-type

#24 orange:last-of-type , apple:last-of-type

#25 bento:empty

#26 apple:not(.small)

#27 [for]

#28 plate[for]

#29 [for="Vitaly"]

#30 [for^="S"]

#31 [for$="o"]

#32 [for*="bb"]

http://nthmaster.com/

자식 선택자사용예에 대해 정리된 사이트 

원문출처 : 패스트캠퍼스 강좌

해답출처 : https://gist.github.com/humbertodias/b878772e823fd9863a1e4c2415a3f7b6