의사 클래스 [first-child][last-child]가 효과가 없는 원인이,
각각의 사용법을 조금 착각하고 있었던 것이었기 때문에 메모.

dl 요소 테이블에서 생각

<dl>
  <dt>dt (first-of-typeで指定可能) or (first-childで指定可能)</dt>
  <dd>dd (first-of-typeで指定可能)</dd>
  <dt>dt</dt>
  <dd>dd</dd>
  <dt>dt (last-of-typeで指定可能)</dt>
  <dd>dd (last-of-typeで指定可能) or (last-childで指定可能)</dd>
</dl>

:first-child

부모 요소에 대한 모든 자식 요소 중 첫 번째 자식 요소에만 적용됩니다.

dl 요소 테이블에서 생각하면 첫 번째 자식 요소는 dt이므로

▼OK

dt:first-child {
}

▼NG

dd:first-child {
}

: last-child

부모 요소에 대한 모든 자식 요소 중 마지막 자식 요소에만 적용됩니다.

dl 요소 테이블에서 생각하면 마지막 자식 요소는 dd이므로

▼OK

dd:last-child {
}

▼NG

dt:last-child {
}

「dt 중에서 마지막」 or 「dd 중에서 마지막」의 요소를 지정하고 싶은 경우는, 이하의 의사 클래스를 사용하면 좋다!

:first-of-type

특정 자식 요소 중 첫 번째 자식 요소에만 적용됩니다.

dl 요소의 테이블에서 생각하면, dt와 dd 함께 사용할 수 있다.

▼OK

dt:first-of-type {
}

즉, dt:first-of-type 는, 「수많은 dt 요소 중에서도 최초의 dt 요소만」에 적용된다.

dd:first-of-type {
}

즉, dd:first-of-type 는, 「수많은 dd 요소 중에서도 최초의 dd 요소만」에 적용된다.

: last-of-type

특정 자식 요소 중 마지막 자식 요소에만 적용됩니다.

dl 요소의 테이블에서 생각하면, dt와 dd 함께 사용할 수 있다.

▼OK

dt:last-of-type {
}

즉, dt:las-of-type는 "수많은 dt 요소 중에서도 마지막 dt 요소만"에 적용된다.

dd:last-of-type {
}

즉, dd:last-of-type 는, 「수많은 dd 요소 중에서도 마지막 dd 요소만」에 적용된다.

참고 사이트