:nth-of-type()을 클래스에 지정했을 때의 거동

엄청 특수한 움직임을 합니다.
예를 들면 .content:nth-of-type(2) 라고 지정했을 경우,container 라는 클래스를 가진 요소와 같은 계층에 있는 요소를 모두 씻어내고 만약 두 번째 요소가 container 라는 클래스를 가지고 있으면 스타일을 적용한다
라는 움직임을 합니다.

무슨 말을 하는지 모르겠다고 생각하기 때문에 아래에 예를 들어 보겠습니다.

예 1

html

<div>
  クラスなし
</div>
<div class="container">
  1つ目のcontainer
</div>
<div class="container">
  2つ目のcontainer
</div>

css

.container:nth-of-type(2){
  background: yellow;
}

출력

같은 계층의 두 번째 요소가 container 클래스이므로 스타일이 적용됩니다.

예 2

html

<div>
  クラスなし
</div>
<div class="container">
  1つ目のcontainer
</div>
<div class="container">
  2つ目のcontainer
</div>

css

/*  odd = 奇数 */
.container:nth-of-type(odd){
  background: yellow;
}

출력

같은 계층의 홀수번째 요소 중, container 클래스를 가지는 것은 3번째만입니다.

예 3

html

<p>同階層のP要素</p>
<div>
  クラスなし
</div>
<ul>
  <li>同階層のリストの子要素</li>
  <li>同階層のリストの子要素</li>
</ul>
<div class="container">
  1つ目のcontainer
</div>
<div class="container">
  2つ目のcontainer
</div>

css

.container:nth-child(5){
  background: yellow;
}

출력

같은 계층의 5번째 요소가 container 클래스를 가지므로 스타일이 적용됩니다.

요약

이상한 움직임을 하기 때문에 조심해!