CSS 선택자 연습 사이트 추천

선택자를 잘 모르면 의도치않게 다른영역도
함께 선택하게된다.
css를 처음접할때 선택자에 대해 공부한 후
연습이 필요했었는데 유용하게 썼던 사이트가있어
소개하려고 글을쓴다.

우선 사이트에 접속한다.
http://flukeout.github.io/

CSS Diner

회원가입이 필요없다.
사이트에 들어가면 바로 문제가 나온다.
움직이는 물건을 선택하는 선택자를 입력하면 된다.
예를들어, 접시위에있는 오이가 움직이고있으면
그 오이만을 선택하는 선택자를 입력하면된다.

오른쪽에는 해당레벨의 문제를 해결하는데
도움이 되는 힌트가 제공된다.

문제를 다 풀면 이런 화면을 볼 수 있다.
선택자에대한 정답은 여러개가 존재할수있으니
내것만이 정답은 아니지만,
참고가 되라고 내가 푼 정답을 밑에 첨부한다.


plate
bento
#fancy
plate>apple
#fancy>pickle
.small
orange.small
bento>orange.small
plate, bento
*
plate>*
plate+apple
bento~pickle
plate>apple
orange:first-child
plate *:only-child
#fancy *:last-child, plate+pickle
plate:nth-child(3)
bento:nth-last-child(3)
apple:first-of-type
plate:nth-of-type(even)
plate:nth-of-type(2n+3)
apple.small:only-of-type
orange:last-of-type, apple:last-of-type
bento:empty
apple:not(.small)
[for]
plate[for]
[for="Vitaly"]
[for^=S]
[for$="o"]
[for*="bb"]