nth-child(), first-child, second-child, last-child.

이 호기심은 first-child로부터 비롯되었다.

 dcoument.querySelector()를 통해 얻어낸 배열들 중의 첫번째 아이를 first-child 라는 의사코드(pseudo code) 를 사용하고, 마지막은 last-child 를 사용한다. 그렇다면, 두 번째 세 번째 .... 는 second-child, thrid-child... 인가? 아니다! 없다. 왜냐하면 처음과 끝은 굉장히 명백한 표현이고, 그 사이의 2번째 3번째 4번째.. 이렇게 만들다 보면 의사코드가 무제한으로 늘어날 것이기에, 간단하게 n번째 아이라고 표현하면 된다. Nth child. n번째 자녀! 이게 바로 이 의사코드의 정확한 의미 아니겠는가. nth-child.

 

 nth-child 를 활용하는 데에는 몇 가지 방식이 있는데, 홀수만 원한다면 (odd)를, 짝수만 원한다면 (even)을, 1,3,5 번째 를 원한다면 (2n+1)의 값을 주면 된다.

 

 더 궁금하다면 아래의 링크를 들어가보자

https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

:nth-child - CSS: Cascading Style Sheets | MDN