⌘K

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

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

구문

css선택자: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 요소를 찾아봅시다: 

html<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>
cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

예제

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

html<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>
cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

예제

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

html<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>
cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат:

Back의사 클래스 nth-of-typeNext의사 클래스 only-of-type