CSS - selector (CSS Diner 해석 17번 ~ 24번)

17. Select the small apple and the pickle

    클래스가 small인 것 중에 마지막 자식을 선택하는 문제입니다.

    따라서 답은 .small:last-child 

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

 

18. Select the 3rd plate

    nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.

    3번째 palte를 선택하는 문제로 답은 plate:nth-child(3)

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

 

19. Select the 1st bento

    끝에서 계산, 형제 자매의 그룹 사이에서 자신의 위치를 기반으로 요소를 일치합니다.:nth-last-child()

    뒤에서 세번째 요소를 선택하므로 답은 bento:nth-last-child(3)

<div class="table">
  <palte />
  <bento />
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <bento />
</div>

 

20. Select first apple

     첫번째 사과를 선택하는 문제로 답은 apple:first-of-type 입니다.

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

 

21. Select all even plates

     짝수번째에 plate를 선택하는 문제로 답은 plate:nth-of-type(even)

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

 

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

    3번째 plate부터 2개 간격 plate 선택하는 문제 입니다.

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

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

 

23. Select the apple on the middle plate

     가운데 plate에 있는 사과를 선택하는 문제입니다.

     only-of-type는 동일한 유형의 어떤 형제가없는 요소를 나타냅니다.

     답은 plate apple:only-of-type

 

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

 

24. Select the last apple and orange

    :last-of-type는 형제 요소 그룹 중 해당 유형의 마지막 요소를 나타냅니다

     small 클래스 중 마지막 요소를 선택하는 문제로 답은 .small:last-of-type

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

 

 

참고 사이트

https://flukeout.github.io/

CSS Diner

https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

:nth-child - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

:nth-last-child() - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type

:only-of-type - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

:last-of-type - CSS: Cascading Style Sheets | MDN