CSS : nth-last-of-type() 선택기
예시
마지막 자식부터 계산하여 부모의 두 번째 p 요소인 모든 <p> 요소의 배경색을 지정합니다.
p:nth-last-of-type(2)
{
background: red;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
선택기 는 특정 유형의 n 번째 자식인 모든 요소와 일치 하며 마지막 자식부터 계산합니다.:nth-last-of-type(n)
n 은 숫자, 키워드 또는 수식일 수 있습니다.
팁: :nth-last-child() 선택기를 보고 유형 에 관계없이 마지막 자식부터 계산하여 부모 의 n 번째 자식인 요소를 선택합니다 .
버전: | CSS3 |
---|
브라우저 지원
표의 숫자는 선택기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Selector | |||||
---|---|---|---|---|---|
:nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 구문
:nth-last-of-type(number) {
css declarations;
}
더 많은 예
예시
홀수 및 짝수는 인덱스가 홀수 또는 짝수(첫 번째 자식의 인덱스는 1)인 자식 요소를 일치시키는 데 사용할 수 있는 키워드입니다.
여기에서 홀수 및 짝수 p 요소에 대해 두 가지 다른 배경색을 지정합니다.
p:nth-last-of-type(odd)
{
background: red;
}
p:nth-last-of-type(even)
{
background: blue;
}
예시
수식 사용( a + b ). 설명: a 는 사이클 크기, n 은 카운터(0에서 시작), b 는 오프셋 값입니다.
여기에서 인덱스가 3의 배수인 모든 p 요소의 배경색을 지정합니다.
p:nth-last-of-type(3n+0)
{
background: red;
}