:first-child와:first-of type,:last-child와:last-of-type의 차이

오늘은 애매모호하게 기억하기 쉽다:first-child와:first-of-type,:last-child와:last-of-type의 차이를 총괄하였다.

퍼스트-child와 퍼스트-of-type의 차이

:first-child

<div>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:first-child {
  color: red;
}

이러면 문제없어요. 최초의 h2요소는 빨간색이에요.
하지만 문제는 다음과 같다.

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:first-child {
  color: red;
}

h1이 추가되면 h2가 첫 아이 요소가 아닐 때
CSS가 효력을 상실했습니다.:first-child 지정된 요소(이번에는 h2)가 첫 번째 아이 요소여야 한다.

:first-of-type

이에 비해:first-of-type 지정된 요소는 첫 번째가 아니더라도 유효하다.
즉, h2가 하위 요소 중 첫 번째가 아니더라도 CSS는 h2의 첫 번째 요소에 적용된다.

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:first-of-type {
  color: red;
}

:last-child와:last-of-type의 차이

그렇다면:last-child와:last-of-type도 마찬가지다.

:last-child

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <h2>坂口安吾</h2>
</div>

h2:last-child {
  color: red;
}

지정한 h2가 마지막 하위 요소인 경우 CSS 적용

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:last-child {
  color: red;
}

h2가 마지막 서브원소가 아니면 적용되지 않습니다.

:last-of-type

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:last-of-type {
  color: red;
}

:last-of-type라면 CSS가 h2의 마지막 요소에 적용되기 때문에 순조롭다.

총결산

이러한 차이를 보면 기본적으로 사용:first-of-type과:last-of-type는 비교적 이해하기 쉽다.
차이를 알면 예기치 못한 행동에 대해 괴로워하지 않을 것이다.
궁금하면 바로 조사하는 습관을 들여라!