가상 클래스 nth-last-child

가상 클래스 nth-last-child는 부모 요소의 끝에서부터 세어 n번째 자식 요소를 선택합니다. nth-child와 유사하게 동작하지만, 끝에서부터 세는 점이 다릅니다.

구문

선택자:nth-last-child(숫자 | odd | even | 표현식) {
	
}

값	설명
숫자	`1`부터 시작하는 양의 정수. 대상 요소의 번호를 지정합니다. 요소 번호는 `1`부터 시작합니다.
`odd`	홀수 번째 요소.
`even`	짝수 번째 요소.
표현식	모든 정수(0부터 시작, 1이 아님)를 나타내는 문자 n을 사용하여 특수 표현식을 구성할 수 있습니다. 따라서 `2n`은 모든 짝수 번째 요소(두 번째부터)를 의미합니다. 이해하는 방법? `n`에 `0`부터 순차적으로 숫자를 대입합니다: n = 0이면 2n은 0이 됨 - 해당 요소 없음(요소 번호는 1부터 시작), n = 1이면 2n은 2 - 두 번째 요소, n = 2이면, 2n은 4 - 네 번째 요소. 3n을 쓰면 매 세 번째 요소(세 번째부터 시작)가 되며, 이런 방식으로 작동합니다.

이 예제에서 부모 요소의 끝에서부터 4번째 자식인 li를 빨간색으로 만듭니다:

<ul>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

이제 끝에서부터 세어 모든 짝수 번째 li를 빨간색으로 만듭니다:

<ul>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

이제 끝에서부터 세어 모든 홀수 번째 li를 빨간색으로 만듭니다:

<ul>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

이제 끝에서부터 세어 매 세 번째 li를 빨간색으로 만듭니다:

<ul>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
	<li>리스트 항목</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}