English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-of-type(an+b) 이 CSS 피seudo-class는 그 뒤에 an이 있는 요소를 일치시킵니다.+b-1 개의 동일한 타입 형제 요소에 대해, n이 양수 또는 0입니다. 이는 기본적으로 :nth와 유사합니다.-of-type과 같지만, 그것은 끝에서부터 반대로 세기 때문에 시작에서부터 세는 것이 아닙니다.
마지막으로부터2개의 span 요소에 배경색을 채우기:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
span:nth-last-of-type(2) {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>이는 스페인입니다.</span>
<span>이는 또 다른 범위입니다.</span>
<em>강조.</em>
<span>와우, 이 범위가 흐릿해졌습니다!</span>
<strike>이는 지워졌습니다.</strike>
<span>이는 마지막 스페인이며.</span>
</div>
</body>
</html>테스트해보세요 ‹/›:nth-last-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-last-of-type(n) 선택자는 동일한 타입의 역순으로 n번째 동일 형제 요소를 일치시킵니다。
n 숫자, 키워드 또는 공식일 수 있습니다。
훈계:참조::nth-last-child()선택자. 이 선택자는 부모 요소 내의 역순으로 n번째 구조 서브 요소를 일치시킵니다
표에서의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다。
| 선택자 | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
奇数과偶数은奇수 또는 짝수의 인덱스를 가진 서브 요소와 일치하는 키워드로 사용할 수 있습니다。
여기서,奇数과偶数的 역순 p 요소에 두 가지 다른 배경색을 지정했습니다：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>이는 첫 번째 구절입니다。</p>
<p>이는 두 번째 구절입니다。</p>
<p>이는 세 번째 구절입니다。</p>
<p>이는 네 번째 구절입니다。</p>
</div>
</body>
</html>테스트해보세요 ‹/›공식（an+ b）.설명：a는 반복의 크기를, N은 카운터(0부터 시작), 그리고 b는 이동량을 나타냅니다.
여기서, 모든 인덱스가3의 배수의 역순의 p 요소에 배경색을 지정했습니다：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>이는 제목</h1>
<p>첫 번째 구절。</p>
<p>두 번째 구절。</p>
<p>第三개의 구절。</p>
<p>第四개의 구절。</p>
<p>第五개의 구절。</p>
<p>第六개의 구절。</p>
<p>第七개의 구절。</p>
<p>第八개의 구절。</p>
<p>第九개의 구절。</p>
<p><b>주의:</b> Internet Explorer 8 그리고 더 이전 버전의 브라우저는 :nth를 지원하지 않습니다-last-child() 선택자.</p>
</body>
</html>테스트해보세요 ‹/›