[CSS] CSS Diner라는 간단한 게임으로 배우는 선택자 (selector)

https://flukeout.github.io/

CSS Diner

 

Level 1 & 2. Type Selector

level 1 답: plate

 

모든 <plate> 태그 선택

 

level 2 답: bento

 

모든 <bento> 태그 선택

 

Level 3. ID Selector

답: #fancy

 

id="fancy"인 요소 선택

특정한 id를 가진 요소를 선택하며 id는 중복될 수 없다

 

Level 4. Descendant Selector

답: plate apple

 

<plate>의 내부에 있는 모든 <apple>을 선택

<apple>은 다른 요소의 내부에 있기 때문에 자손이라 불린다

 

Level 5. Combine the Descendant & ID Selector

답: #fancy pickle

 

id="fancy"인 요소의 내부에 있는 모든 <pickle>을 선택

모든 선택자는 자손 선택자와 결합할 수 있다

 

Level 6. Class Selector 

답: .small

 

class="small"인 모든 요소 선택

클래스 선택자는 클래스 속성을 가진 모든 요소를 선택한다

요소는 여러개의 클래스를 가질 수 있다

 

Level 7. Combine the Class Selector 

답: orange.small

 

class="small"인 모든 <orange> 선택

 

Level 8. 

답: bento orange.small

 

<bento>의 내부에 있으며, class="small"인 모든 <orange> 선택

 

Level 9. Comma Combinator

답: plate, bento

 

모든 <plate>와 <bento> 선택

 

Level 10. The Universal Selector 

답: *

 

모든 요소 선택

 

Level 11. Combine the Universal Selector

답: plate *

 

<plate> 내부의 모든 요소 선택

 

Level 12. Adjacent Sibling Selector 

답: plate + apple

 

<plate>의 바로 다음에 나오는 하나의 <apple>을 선택

어떤 요소의 다음에 나오며 그 요소와 같은 레벨과 깊이를 가진 요소를 형제라고 한다.

HTML 마크업에서 같은 들여쓰기 깊이를 가진 요소들이 형제라고 생각하면 된다.

 

Level 13. General Sibling Selector 

답: bento ~ pickle

 

<bento>의 다음에 나오는 모든 <pickle>을 선택

Adjacent Sibling Selector와 비슷하지만 모든 요소를 선택한다는 점이 다르다.

 

Level 14. Child Selector 

답: plate > apple

 

<plate>의 직계 자식인 모든 <apple>을 선택

 

Level 15. First Child Pseudo-selector

답: orange:first-child

 

<orange> 중에서 어떤 요소의 첫번째 자식인 <orange> 선택

<orange>의 첫번째 자식을 뜻하는 게 아니다.

 

Level 16. Only Child Pseudo-selector

답: plate :only-child

 

<plate>의 자식이면서 혼자(외동)인 요소 선택

어떤 요소의 외동 자식인 <plate>를 선택하고 싶다면

띄어쓰기를 생략하고 plate:only-child로 붙여써야 한다.

 

Level 17. Last Child Pseudo-selector

답: .small:last-child

 

class="small"을 가진 요소 중 마지막 자식 요소 선택

어떤 요소 안에 <one>이라는 요소 하나만 있다면 <one>은 first-child, only-child, last-child 전부 해당된다.

 

Level 18. Nth Child Pseudo-selector

답: plate:nth-child(3)

 

위에서 세번째에 있는 <plate> 선택

<plate>중에서 세번째에 있는 요소가 아니라

모든 형제 요소 중 위에서 3번째에 있으면서 <plate>인 요소를 선택하는 것이다.

 

Level 19. Nth Last Child Selector

답: bento:nth-last-child(3)

 

밑에서 세번째에 있는 <bento> 선택

:nth-child()와 반대로 밑에서 부터 센다.

 

Level 20. First of Type Selector

답: apple:first-of-type

 

처음으로 나오는 <apple> 선택

 

Level 21. Nth of Type Selector

답: plate:nth-of-type(even)

 

even(짝수)번째에 있는 <plate>를 선택

 

Level 22. Nth of type Selector with Formula

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

 

세번째를 포함하고 그 이후의 2n번째 <plate> 모두 선택

 

Level 23. Only of Type Selector

답: plate apple:only-of-type

 

<plate>의 내부에서 유일한 <apple> 선택

 

Level 24. Last of Type Selector

답: .small:last-of-type

 

class="small"이고 형제 중 마지막에 있는 태그 모두 선택

 

Level 25. Empty Selector

답: bento:empty

 

자식 요소가 없는 <bento> 모두 선택

 

Level 26. Negation Pseudo-class

답: apple:not(.small)

 

class="small"이 아닌 <apple> 모두 선택

 

Level 27. Attribute Selector

답: [for]

 

속성 [for]를 가진 요소 모두 선택

 

Level 28. Attribute Selector

답: plate[for]

 

속성 for를 가진 <plate> 모두 선택

 

Level 29. Attribute Value Selector

답: [for="Vitaly"]

 

속성 for의 값이 "Vitaly"인 태그 모두 선택

 

Level 30. Attribute Starts With Selector

답: [for^="Sa"]

 

속성 for의 값이 "Sa"로 시작하는 태그 모두 선택

 

Level 31. Attribute Ends With Selector

답: [for$="ato"]

 

속성 for의 값이 "ato"로 끝나는 태그 모두 선택

 

Level 32. Attribute Wildcard Selector

답: [for*="obb"]

 

속성 for의 값이 "obb"를 포함하는 태그 모두 선택