CSS를 사용할 때 많이 혼동하지만, first-child는 element의 절대적인 위치를 나타낸다. 즉, 자식 element 중 '해당하는' 요소의 첫 번째가 아니라, '모든' 요소의 첫 번째를 가리킨다. 전자를 지정하기 위해서는 first-of-type을 사용해야 한다. 예를 들어,

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

즉 div:first-child는 아무런 div도 가리키지 않는다¹⁾.

내용이 많아지면 tips로 옮겨서 작성.