[CSS] 헷갈리는 선택자 정리 : CSS Diner

CSS Diner에서 출제된 문제 중, 유난히 헷갈렸던 문제들을 위주로 정리해보았다.
아래에 제시되는 모든 예제들은 CSS Diner에서 발췌해왔다.
출처 : https://flukeout.github.io/

Lv 7) orange.small / orange>.small

' orange.small '은 얼핏보면 두 개의 요소가 나열된 선택자처럼 보이지만, 사실은 하나의 요소이다.

x.[class명] : [ class명 ]이 정의되어있는 x 요소
x>.[class명] : x의 직계요소 중 [ class명 ]가 정의되어있는 요소

• orange.small : ' small '이란 class를 갖는 orange

<div class="table">

  <apple />
  <apple class="small" />
  
  <bento>
    <!--orange.small------->
    <orange class="small" />
    <!--------------------->
  </bento>
  
  <plate>
    <orange />
  </plate>
  
  <plate>
    <orange class="small" />
  </plate>
  
</div>

• orange>.small : orange의 자식 중 ' small '이란 class 를 갖는 요소

<!-- /// nothing selected /// -->
<div class="table">

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

Lv 15) plate:first-child / plate :first-child

선택자를 정의할때에는 띄어쓰기에 유의해야한다. 띄어쓰기에 따라 아래처럼 의미가 크게 바뀌기 때문이다.

x:first-child : 첫번째 자식자로써의 자격을 갖는 x 요소
x :first-child : x의 하위요소 중 x의 첫번째 자식자로써의 자격을 갖는 요소

참고로 위의 정의는 필자 마음대로 적어내린 것이니, 100% 정확하지 않을 수 있다.
이어서 Level 15의 예제도 풀어보도록 하겠다.

• plate:first-child : div의 첫번째 자식자로써의 plate

<!-- /// nothing selected /// -->

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

• plate :first-child : plate의 하위요소 중 plate의 첫번째 자식자로써의 자격을 갖는 요소

<div class="table">

  <bento />
  <plate />
  
  <plate>
    <!--plate :first-child-->
    <orange />
    <!---------------------->
    <orange />
    <orange />
  </plate>
  
  <pickle class="small" />
  
</div>

Lv 20) :first-of-type / :first-child

x:first-of-type : 첫번째 x 요소
x:first-child : 첫번째 자식자로써의 자격을 갖는 x 요소

해당 내용은 나도 조금씩 알아가는 중이다. 추후 포스팅하도록 하겠다.