CSS Diner 풀이

https://flukeout.github.io/

CSS Diner

css 선택자를 활용하여 간단한 게임을 진행
답과 풀이.

총 32문제!

1. select
   plate

2. select
   bento

3. id select
   ,#fancy

4. Descendant Selector
   (한 요소 안에 모든 자손)
   plate apple

5. id select Descendant
   plate#fancy pickle

6. Class Selector
   .samll

7. A.ClassName
   orange.small

8. A ClassName
   bento orage.small

9. Comma Combinator
   plate, bento

10. The Universal Selector
    ,*

11. Combine the Universal Selector
    plate *

---

• 여기부터 좀 혼돈이 오는 요소가 나온다.

12. Adjacent Sibling Selector
    (인접 선택자. A 뒤에 B)
    plate + apple

13. General Sibling Selector
    (형제 선택자, A부터 있는 B)
    bento ~ pickle

14. Child Selector
    (A에 속해있는 B)
    plate > apple

15. First Child Pseudo-selector
    (A뒤의 첫번째 B)
    plate orange:first-child

16. Only Child Pseudo-selector
    (A요소의 자손)
    plate apple:only-child,
    plate pickle:only-child

17. Last Child Pseudo-selector
    (A요소를 갖는 마지막 자손)
    #fancy apple,
    pickle:last-child

18. Nth Child Pseudo-selector
    (n번째 자식 요소)
    plate:nth-child(3)

19. Nth Last Child Selector
    (뒤에서 n번째 요소)
    bento:nth-last-child(3)

20. First of Type Selector
    (x 타입을 갖는 첫번째 요소)
    apple:first-of-type

21. Nth of Type Selector
    (n번째 타입 셀렉터 - 짝수)
    plate:nth-of-type(2n)
    ...(even)

22. Nth-of-type Selector with Formula
    (n번째 부터 + b)
    plate:nth-of-type(2n+3)
    (3번째부터 +2n)

23. Only of Type Selector
    (특정 속성을 가진 요소)
    plate apple:only-of-type

24. Last of Type Selector
    (특정 속성을 가진 마지막 요소)
    orange:last-of-type,
    apple:last-of-type

25. Empty Selector
    (빈요소)
    bento:empty

26. Negation Pseudo-class
    (해당 속성을 갖고 있지 않은 요소)
    apple:not(.small)

---

속성 선택자

27. Attribute Selector
    [for]

28. Attribute Selector
    (A요소 중 속성을 갖고 있는 요소)
    plate[for]

29. Attribute Value Selector
    (A요소 중 특정 속성을 갖고 있는 요소)
    bento[for='Vitaly']

30. Attribute Starts With Selector
    (A요소 중 특정 문자로 시작하는 요소)
    [for^='Sa']

31. Attribute Ends With Selector
    (A요소 중 특정 문자로 끝나는 요소)
    [for$="to"]

32. Attribute Wildcard Selector
    (A요소 중 특정 문자를 갖고 있는 요소)
    bento[for*="bb"]