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