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도 가리키지 않는다¹⁾.

!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.

Anything else is probably misuse, and a sign you may not understand the cascade properly. – Steven Pemberton

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

• https://stackoverflow.com/questions/33569998/how-do-i-force-td-within-a-table-row-below-another-td

• https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element

• (번역) 레이아웃 알고리즘 이해하기

Backlinks