CSS Diner : selector 연습하기 (21 ~ 32번)

21. Select all even plates

<div>
	<plate />
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
    <plate />
</div>

정답 : plate:nth-of-type(even)
해설 : 이번 문제는 짝수 번째에 있는 접시를 선택하는 문제이다.
          plate 태그 타입의 짝수 번째에 있는 요소를 선택하기 위해 nth-of-type 선택자에서도 
          even 키워드를 사용하여 짝수 번째를 지정하면 된다.
          홀수를 지정하고 싶다면 even 대신 odd 키워드를 사용하면 된다. 

 

22. Select every 2nd plate, starting from the 3rd

<div>
	<plate />
    <plate>
    	<pickle class="small" />
    </plate>
    <plate>
    	<apple class="small" />
    </plate>
    <plate>
    	<apple />
    </plate>
    <plate />
</div>

정답 : plate:nth-of-type(2n+3) | plate:nth-child(2n+3)
해설 : 이번 문제는 3번째 접시에서 시작해서 짝수 번째에 있는 접시를 선택하는 문제이다.
          위치에 관련된 것이기 때문에 nth 선택자를 사용하면 되고, 
          이 문제에서는 한 부모에서의 위치만 보면 되기 때문에 child 선택자를 활용할 수도 있다.
          일단 3번째 위치에서 시작하기 위해서는 3 이 필요하고,
          그로부터 짝수 번째의 접시를 선택해야 하기 때문에 2n 을 작성하게 된다.

 

23. Select the apple on the middle apple

<div>
	<plate id="fancy">
    	<apple class="small" />
        <apple />
    </plate>
    <plate>
    	<apple class="small" /> 
    </plate>
    <plate>
    	<pickle />
    </plate>
</div>

정답 : apple:only-of-type
해설 : 이번 문제는 사과를 선택하는데, 접시에 사과 하나만 있는 것을 선택해야 한다.
           apple 태그를 선택하고 그 중에서도 apple 타입을 하나만 가지고 있는 것을 선택하면 된다.
           only-of-type 선택자는 선택하고자 하는 타입을 자식으로서 하나만 가지고 있는 요소를 선택한다.

 

24. Select the last apple and orange

<div>
	<orange class="small" />
    <orange class="small" />
    <pickle />
    <pickle />
    <apple class="small" />
    <apple class="small" />
</div>

정답 : orange:last-of-type, apple:last-of-type
해설 : 이번 문제는 오렌지와 사과를 고르는데 각각 마지막 요소를 고르는 문제이다.
          같은 타입 내에서 마지막 요소를 선택하기 위해서는 last-of-type 선택자를 사용할 수 있다.

 

25. Select the empty bentos

<div>
	<bento />
    <bento>
    	<pickle class="small" />
    </bento>
    <plate />
    <bento />
</div>

정답 : bento:empty
해설 : 이번 문제는 자손 요소가 없는 도시락을 선택하는 문제이다.
          대상 태그에 자손이 없는 경우를 선택하는 선택자는 empty 이다.

 

26. Select the big apples

<div>
	<plate id="fancy">
    	<apple class="small" />
    </plate>
    <plate>
    	<apple />
    </plate>
    <plate>
    	<orange class="small" />
    </plate>
    <pickle class="small" />
</div>

정답 : apple:not(.small)
해설 : 이번 문제는 큰 사과만을 고르는 문제이다.
          사과의 종류가 큰 것과 작은 것 두 가지가 있기 때문에 작은 것을 배제해야 한다.
          같은 타입에서 특정한 요소를 제외하고 싶을 때에는 not(특정요소) 선택자를 사용할 수 있다.

 

27. Select the items for someone

<div>
	<bento>
    	<apple class="small" />
    </bento>
    <apple for="Ethan" />
    <plate for="Alice">
    	<pickle />
    </plate>
    <bento for="Clare">
    	<orange />
    </bento>
</div>

정답 : *[for]
해설 : 이번 문제는 요소 중에서도 누군가의 것임을 나타내고 있는 요소를 골라내는 문제이다.
          누군가의 것임을 나타내는 요소를 모두 for 라는 속성을 공통적으로 가지고 있다.
          선택 대상이 될 요소가 공통 속성을 가지고 있을 때에 사용할 수 있는 선택자는 [ ] 이다.
          이 대괄호 안에는 해당되는 속성을 써주면 된다.

 

28. Select the plates for someone

<div>
	<plate for="Sarah">
    	<pickle />
    </plate>
    <plate for="Luke">
    	<apple />
    </plate>
    <bento for="Steve">
    	<orange />
    </bento>
</div>

정답 : plate[for]
해설 : 이번 문제는 접시 중에서 누군가의 것으로 되어 있는 요소만 선택하는 문제이다.
          선택하고자 하는 태그가 명확하기 때문에 plate 를 선택하고,
          그중에서도 for 속성을 가지고 있어야 하기 때문에 속성 선택자를 활용한다.

 

29. Select Vitaly's meal

<div>
	<apple for="Alxel" />
    <bento for="Albina">
    	<apple />
    </bento>
    <bento for="Vitaly">
    	<orange />
    </bento>
    <pickle />
</div>

정답 : bento[for="vitaly"]
해설 : 이번 문제는 도시락 중에서 for 속성의 값이 Vitaly 인 것을 선택하는 문제이다.
          특정 속성의 값을 한정하기 위해서는 [속성명="속성값"] 을 활용할 수 있다.

 

30. Select the items for names that start with 'Sa'

<div>
	<plate for="Sam">
    	<pickle />
    </plate>
    <bento for="Sarah">
    	<apple class="small" />
    </bento>
    <bento for="Mary">
    	<orange />
    </bento>
</div>

정답 : *[for^="Sa"]
해설 : 이번 문제는 for 속성을 가진 요소 중 for 속성의 값으로 "Sa" 를 포함하는 요소만을 선택하는 문제이다.
          속성 값의 일부에 일치하는 것을 찾기 위해서는 [속성명^=속성값] 을 활용할 수 있다.

 

31. Select the items for names that end with 'ato'

<div>
	<apple class="small" />
    <bento for="Hayato">
    	<pickle />
    </bento>
    <apple for="Ryota" />
    <plate for="Minato">
    	<orange />
    </plate>
    <pickle class="small" />
</div>

정답 : *[for$="ato"]
해설 : 이번 문제는 for 속성의 값이 'ato'로 끝나는 요소를 고르는 문제이다.
          끝부분의 일치를 찾기 위해서는 [속성명$=속성값] 을 활용할 수 있다.

 

32. Select the meals for names that contain 'obb'

<div>
	<bento for="Robbie">
    	<apple />
    </bento>
    <bento for="Timmy">
    	<pickle />
    </bento>
    <bento for="Bobby">
    	<orange />
    </bento>
</div>

정답 : bento[for*="obb"]
해설 : 이번 문제는 for 속성의 속성 값으로 obb 를 포함하고 있는 요소를 선택하는 문제이다.
          포함과 관련한 선택자는 [속성명*=속성값] 을 활용할 수 있다.