| 출처 : C언어 예술가 |
🏷️ html에서 같은 형태의 요소들이 반복 될때, 이 요소들을 특정 순서에 따라 CSS속성을 다르게 지정 하고 싶을 때 nth-child 선택자를 사용해 해결할 수 있다.
1. nth-child()
div:nth-child(4) 👉 div에 의해 가장 먼저 <div.> 1.스폰지밥 </div.> 이 찾아진다. 그 다음은 nth-child(4) 에 의해 body(부모) > 4번째 자식요소를 찾아 CSS가 적용되는 것 이다.
같은 종류(type)의 요소에만 적용된다.
위 선택자의 괄호안의 숫자를 3으로 변경해보자. 그러면 <p.> 3.징징이 </p.>가 선택되는데 CSS가 적용되지 않는다.
자식요소의 순서를 셀 때는 모든 요소를 다 포함해서 세지만, 적용되는 요소는 선택자에서 선택한 요소 타입과 동일해야 적용된다.
그러면 3.징징이 를 적용시키기 위해서는 어떻게 작성을 해야할까? 간단하다.
id:nth-child(3) 으로 type만 변경하게되면 적용된다.
2. first-child
div:first-child👉 이름에서도 유추할 수 있듯이 body(부모)의 첫번째 자식요소를 선택한다는 뜻이다. 이는 nth-child(1)와 동일하다. first-child도 nth-child(숫자)와 동일하게 같은 종류의 요소에만 적용되기 때문에 p태그의 첫번째 요소인 <p.> 3.징징이 </p.> 는 .exam p:first-child로 작성하게 되면 CSS가 적용된다.
3. last-child
div:last-child👉 first, last 모두 nth-child와 적용방법은 동일하다.
단지 last-child는 first-child과 상반되는 개념으로 body(부모)의 자식요소들 중에 가장 마지막 요소를 선택한다는 뜻이다.
div:last-child로 작성했는데 CSS가 적용되지않았다. 이유가 무엇때문일까?
처음부터 강조했던 같은종류(type)으로 작성하지 않아서다.
last-child의 종류는 div태크가 아닌 p태그로 구성되어있기 때문에 적용되지않았던 것이다.
3-1. nth-last-child()
div:nth-last-child(5) 