:nth-child
해당 가상 클래스를 선언한 부모의 기준으로 자식을 선별하기에 형제간에 어떠한 요소가 추가되면 망한다.
국가 리스트에서 짝수 번째 있는 나라에만 배경색을 추가하려 했지만, div요소가 상위체 추가되면서 의도와 다르게 코딩 되었다.
:nth-of-type
그래서 다안으로 :nth-of-type이다.이건 요소 tag 기준에 따라 설정되지만 여전히 헛점은 있다
of <selector>
이 문법을 사용하면 더 복잡한 코딩을 할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
:nth-child() - CSS: Cascading Style Sheets | MDN
The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a
developer.mozilla.org
https://www.youtube.com/watch?v=4p7gPzAtVqc
'IT > web' 카테고리의 다른 글
| [http] gzip 테스트 (0) | 2024.04.24 |
|---|---|
| [css] Block Formatting Context (BFC) (0) | 2024.04.22 |
| [css] body에 배경을 변경했을 때 (0) | 2024.04.22 |
| [css] 마진병합 (0) | 2024.04.21 |
| [css] width, height 알 수 없는 div, 가로 세로 모두 가운데 정렬하기 (0) | 2024.04.21 |
