차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:language:css [2023/11/10 17:41] – 만듦 clockoon
+++ wiki:language:css [2024/04/28 14:10] (현재) – merge two documents clockoon
@@ 줄 1: / 줄 1: @@
-# CSS
+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
@@ 줄 6: / 줄 22: @@
 > 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
 ## 유용한 글들

wiki/language/css.txt · 마지막으로 수정됨: 2024/04/28 14:10 저자 clockoon