CSS
====

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

```css
<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도 가리키지 않는다[^1].

## !important
> !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](https://twitter.com/stevenpemberton/status/1505839184287870981?s=20&t=_eW9HipzNTzEnBeo_r5giA)

## Tips
내용이 많아지면 [[:language:css:tips]]로 옮겨서 작성.

### td를 수직으로 배열하기
- 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

[^1]: 출처: https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type/24657721#24657721

## 유용한 글들
- [[번역) 레이아웃 알고리즘 이해하기](https://junghan92.medium.com/번역-레이아웃-알고리즘-이해하기-baed8b1eca5f|(번역) 레이아웃 알고리즘 이해하기]]