[CSS] CSS selector

[CSS] CSS selector

CSS Selector를 잘 알면 jQuery를 사용해서 DOM을 조작하는 것이 너무 쉽다.

쉬우면 재미있고 재미있으면 오래기억 남으니까 CSS Selector를 공부를 하기로 했다.

공부를 하기 위해 찾은 사이트를 기록하려고 한다.

http://flukeout.github.io/

Level 1~32 까지 게임으로 진행할 수 있다.

1. plate

2. bento

3. #fancy

4. plate apple

5. #fancy pickle

6. .small

7. orange.small

8. bento > orange.small

9. bento, plate

10. *

11. plate *

12. plate + apple

13. bento ~ pickle

14. plate > apple

15. orange:first-child

16. plate > :only-child

17. .small:last-child

18. plate:nth-child(3)

19. bento:nth-last-child(3)

20. apple:first-of-type

21. plate:nth-of-type(even)

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

23. .small:only-of-type

24. .small:last-of-type

25. bento:empty

26. apple:not(.small)

27. [for]

28. plate[for]

29. bento[for="Vitaly"]

30. [for^="S"]

31. [for$="o"]

32. [for*="bb"]