의사 클래스 nth-last-of-type

의사 클래스 nth-last-of-type는 부모로부터 특정 유형의 끝에서부터 n번째 자손인 요소를 선택합니다. nth-of-type와 유사하게 동작하지만, 끝에서부터 카운트를 합니다.

구문

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

값

값	설명
숫자	`1`부터 시작하는 양의 정수입니다. 대상으로 할 요소의 번호를 지정합니다. 요소 번호는 `1`부터 시작합니다.
`odd`	홀수 번째 요소들.
`even`	짝수 번째 요소들.
표현식	모든 정수를 나타내는 문자 n(1이 아닌 0부터)을 사용하여 특별한 표현식을 만들 수 있습니다. 예를 들어, `2n`는 모든 짝수 번째 요소를 의미합니다(두 번째부터). 이것을 어떻게 이해할까요? `n`에 `0`부터 차례로 숫자를 대입합니다: n = 0이면 2n은 0이 되고 - 이런 요소는 없습니다(요소 번호는 1부터 시작합니다). n = 1이면 2n은 2가 되어 두 번째 요소, n = 2이면 2n은 4가 되어 네 번째 요소를 의미합니다. 3n이라고 쓰면 세 번째 요소마다(세 번째부터 시작)가 됩니다.

예제

부모 안에서 끝에서부터 두 번째 h2 요소를 찾아봅시다:

<div>
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
</div>

h2:nth-last-of-type(2) {
	color: red;
}

예제

끝에서부터 모든 짝수 번째 h2를 찾아봅시다:

<div>
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
</div>

h2:nth-last-of-type(even) {
	color: red;
}

예제

끝에서부터 모든 홀수 번째 h2를 찾아봅시다:

<div>
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
	
	<h2>제목</h2>
	<p>단락</p>
</div>

h2:nth-last-of-type(odd) {
	color: red;
}