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

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


```css
.aaa.bbb {
    color: #000;
}
```

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

```css
.aaa\.bbb {
    color: #000;
}

[class=‘aaa.bbb’] {
    display:none;
}
```

## 유용한 글들
- [번역) 레이아웃 알고리즘 이해하기](https://junghan92.medium.com/번역-레이아웃-알고리즘-이해하기-baed8b1eca5f)
- [이번에야말로 CSS Flex를 익혀보자](https://studiomeal.com/archives/197)
- [CSS order 쓰는 법](https://velog.io/@yena1025/CSS-order-%EC%93%B0%EB%8A%94-%EB%B2%95)
- [MDN: order](https://developer.mozilla.org/ko/docs/Web/CSS/order)