【CSS】요모조모 유용하게 쓰이는 nth-child()

:nth-child() 의사 클래스는 하나의 인수를 지정하여, 형제 그룹의 요소 중 요소의 위치를 선택하기 위한 패턴을 말합니다. 요소의 위치는 앞에서부터 시작합니다.(1부터)

● x번째

제일 기본적인 쓰임새

/* 리스트의 x번째 요소 */
li:nth-child(x) {
}

li:nth-child(3) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

● 첫 번째

/* 리스트의 첫 번째를 선택 */
li:nth-child(1) {
}

li:nth-child(1) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

※ 첫 번째를 선택하는 구조 선택자 :first-child도 있지만 형제 그룹 속에 다른 태그가 섞여 앞에 다른 태그가 존재할 경우() 첫 번째로 적용이 되지 않으므로 숫자로 지정하면 확실합니다.

※ 인덱스는 1부터 시작합니다.

● 마지막

/* 리스트 중 제일 마지막을 선택 */
li:last-child {
}

li:last-child { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

※ 리스트 갯수가 늘어나거나 줄어들어도 반드시 제일 마지막을 선택하기에 편리합니다.

● x번째 이전까지 (첫 번째부터 x번째까지 선택)

/* 리스트의 처음부터 x번째까지 선택 */
li:nth-child(-n+x) {
}

li:nth-child(-n+4) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

※ n은 0부터 시작합니다.

● x번째 이후부터 (x번째부터 마지막까지 선택)

/* 리스트의 x번째부터 마지막까지 선택 */
li:nth-child(n+x) {
}

li:nth-child(n+2) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

● x번째부터 y번째까지

/* 리스트의 x번째부터 y번째까지 선택 */
li:nth-child(n+x):nth-child(-n+y) {
}

li:nth-child(n+2):nth-child(-n+4) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

● x번째를 제외한 전부

/* 리스트의 x번째 제외한 전부 선택 */
li:not(:nth-child(x)) {
}

li:not(:nth-child(3)) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

※ :not(:nth-child(x)):not(:nth-child(y))는 NG!

[x번째 -> y번째가 아니다 & y번째 -> x번째가 아니다]로 인식되어 결국 적용이 되지 않습니다.

● 홀수 번째

/* 리스트의 홀수 번째 선택 */
li:nth-child(odd) {
}
li:nth-child(2n-1) {
}

li:nth-child(odd) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배

● 짝수 번째

/* 리스트의 짝수 번째 선택 */
li:nth-child(even) {
}
li:nth-child(2n) {
}

li:nth-child(even) { background-color: #3fff3f; }
<ul>    <li>사과</li>    <li>딸기</li>    <li>포도</li>    <li>수박</li>    <li>배</li> </ul>	사과 딸기 포도 수박 배