CSS Diner : selector 연습하기 (11 ~ 20번)

11. Select everything on a plate

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

정답 : plate *
해설 : 이번 문제는 접시 위의 모든 요소를 선택하는 문제이다.
          모든 요소 * 중에서도 접시를 조상 또는 부모로 가지고 있어야 하기 때문에
          공백을 이용하여 조상 또는 부모로 plate 를 명시해준다.

 

12. Select every apple that's next to a plate

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

정답 : plate + apple
해설 : 이번 문제는 접시 다음에 있는 사과를 선택하는 문제이다.
          즉, 크기와 상관없는 사과를 선택할 것인데,
          그 사과 중에서도 접시를 인접 형제로 가지고 있는 사과만 선택하는 것이다.
          인접 형제를 선택하는 선택자는 + 로 구분하여 '접시를 인접한 형제로 가진 + 사과' 처럼 사용할 수 있다.

 

13. Select the pickles beside the bento

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

정답 : bento ~ pickle
해설 : 이번 문제는 도시락 다음에 있는 피클을 선택하는 문제이다.
          이 때의 피클은 접시 위의 피클이 아니라는 것이 중요하다.
          즉 내가 선택할 대상은 단순한 피클이며, 도시락을 형으로 가지고 있는 것이다.
          '도시락을 형으로 가진~피클들' 로 표현할 수 있다.
          인접 형제 선택자 '+' 를 하게 되면 대상에 인접한 형제 관계만 보기 때문에 
           '도시락 + 피클' 을 통해 작은 피클은 선택 될 수 있지만,
          큰 피클은 '피클 + 피클' 이기 때문에 선택되지 못한다는 차이점이 있다.

 

14. Select the apple directly on a plate

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

정답 : plate > apple
해설 : 이번 문제는 사과 중에서도 접시 바로 위에 있는 사과를 선택하는 문제이다.
          단순히 plate apple 로 선택하게 되면 접시를 조상 또는 부모로 하는 모든 사과를 선택하게 되기 때문에
          첫번째 사과 또한 선택되어 원하는 방향이 아니게 된다.
          즉 사과의 직접적인 부모가 도시락이 아니라 접시여야 한다.
          자손 선택자 보다 직접적인 관계는 자식 선택자로 선택할 수 있다.
          plate > apple 하게 되면 선택할 사과는 조상이 아닌 부모가 접시인 것을 의미하게 된다.
          첫번째 사과의 부모는 도시락이며, 조상은 접시이기 때문에 이번에는 선택되지 않는다.

 

15. Select the top orange

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

정답 : orange:first-child
해설 : 이번 문제는 오렌지 중에서도 첫번째 오렌지를 선택하는 문제이다.
          같은 접시를 부모로 둔 요소들 중에 첫번째 요소를 선택하는 것은 first-child 선택자를 사용하면 된다.
          '대상이 되는 요소:fisrt-child' 형태로 사용할 수 있고,  
          이 문제에서 대상이 되는 요소는 orange 이다.

 

16. Select the apple and the pickle on the plates

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

정답 :  plate apple, plate pickle | plate > :only-child
해설 : 이번 문제는 사과와 피클을 선택하는데, 그 중에서도 접시 위에 있는 사과와 피클을 선택하는 것이다.
          단순히 접시를 조상 또는 부모로 가지는 사과와 피클로 표현할 수도 있다.
          또는 only-child 선택자를 이용해서 선택 가능한데,
          '(선택하고자 하는 대상:only-child)' 형태로 사용할 수 있고,
          이는 선택하고자 하는 대상이 유일한 자식 요소일 때에 사용할 수 있는 선택자이다.

 

17. Select the small apple and the pickle

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

정답 : .small:last-child
해설 : 이번 문제는 작은 사과와 피클을 선택하는 문제이다.
          이 두 요소는 모두 class 식별자 이름이 동일하다는 특징이 있기 때문에 이를 활용하면 된다.
          .small 을 식별자 명으로 사용하면서 이들의 마지막 요소를 선택하는 것이다.
          여기서 작은 오렌지가 선택되지 않는 이유는 해당 요소가 마지막이 아닌 첫번째 요소이기 때문이다.

 

18. Select the 3rd plate

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

정답 : plate:nth-child(3)
해설 : 이번 문제는 3번째에 위치한 접시를 선택하는 문제이다.
          특정 번째에 위치한 요소를 선택하기 위해서는 nth-child(n) 선택자를 사용할 수 있다.
          '대상이 되는 요소:nth-child(특정 번째 | odd(2n+1)(홀수 번째) | even(2n)(짝수 번째)' 로 표현하고,
          여기서는 반복되는 것이 아닌 세번째만을 특정하기 때문에 3을 써주면 된다.

 

19. Select the 1st bento

<div>
	<plate />
    <bento />
    <plate>
    	<orange />
        <orange />
        <orange />
    </plate>
    <bento />
</div>

정답 : bento:nth-last-child(3)
해설 : 이번 문제는 도시락 중에서도 첫번째의 도시락을 선택하는 문제이다.
          출제 의도를 활용해 보자면, nth-last-child 를 이용할 수 있다.
          이 선택자는 마지막 자식 요소부터의 순번을 매기는 것으로 사용할 수 있는데,
          선택하고자 하는 도시락은 마지막 요소로부터 세번째이기 때문에 3을 작성해주면 된다.
           이외에도 앞서 활용한 bento:nth-child(2) 또는 bento:first-of-type 등을 함께 쓸 수 있다.

 

20. Select first apple

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

정답 : apple:first-of-type
해설 : 이번 문제는 사과 중에서도 첫번째 사과를 선택하는 문제이다.
          요소 타입의 한정을 하고 있기 때문에 of-type 을 활용하면 좋은 문제이다.
           '대상 타입:first-of-type' 의 형태로 사용하고, 대상이 되는 타입의 첫번째 요소를 선택하게 된다.