CSS

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

HTML spec에서는 ID에 온점을 허용한다. 즉, <div class=“aaa.bbb”></div>는 유효하다. 그러나 CSS에서 클래스를 온점으로 구분하기 때문에 이를 통상적인 방식으로 호출하는 것은 불가능하다. 요컨대 이런 코드는 성립하지 않는다.

.aaa.bbb {
    color: #000;
}

대신, 백슬래시로 이스케이프하거나 attribute selector를 활용해야 한다.

.aaa\.bbb {
    color: #000;
}
 
[class=‘aaa.bbb’] {
    display:none;
}

• 번역) 레이아웃 알고리즘 이해하기
• 이번에야말로 CSS Flex를 익혀보자
• CSS order 쓰는 법
• MDN: order

Backlinks