【CSS】제일 마지막 요소부터 세는 nth-last-child()

:nth-last-child() 의사 클래스는 형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴을 나타내는 인수 1개를 선택합니다. 이 의사 클래스는 첫 번째 요소부터 순서를 매기지 않고 제일 마지막 요소부터 순서를 매기는 점을 빼면 본질적으로 :nth-child와 같습니다.

● 뒤에서부터 x번째

제일 기본적인 쓰임새

/* 리스트의 마지막 요소로부터 x번째 요소 */
li:nth-last-child(x) {
}

li:nth-last-child(3) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

● 마지막

/* 리스트의 마지막 요소를 선택 */
li:nth-last-child(1) {
}

li:nth-last-child(1) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

※ :last-child와 동일합니다.

● 응용된 형태

/* 리스트 중 뒤에서 4,6,8번째 요소 */
li:nth-last-child(2n+4) {
}

li:nth-last-child(2n+4) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

※ (2×0)+4, (2×1)+4, (2×2)+4

● 뒤에서부터 x번째까지의 요소

/* 리스트의 뒤에서부터 x번째까지 선택 */
li:nth-last-child(-n+x) {
}

li:nth-last-child(-n+3) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

● x번째 이후부터 첫 번째 요소까지

/* 리스트의 x번째부터 첫 번째까지 선택 */
li:nth-last-child(n+x) {
}

li:nth-last-child(n+2) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

● 형제 그룹 속 요소가 x개 이상일 때 전체 선택

/* 요소가 x개 이상일 때 전체 선택 */
li:nth-last-child(n+x),
li:nth-last-child(n+x) ~ li {
}

li:nth-last-child(n+4), li:nth-last-child(n+4) ~ li { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩	감자 고구마 배추

※ 요소가 4개 이상인 형제 그룹의 요소 선택

● 형제 그룹 속 요소가 x개 이하일 때 전체 선택

/* 요소가 x개 이하일 때 전체 선택 */
li:nth-last-child(-n+x):first-child,
li:nth-last-child(-n+x):first-child ~ li {
}

li:nth-last-child(-n+4):first-child, li:nth-last-child(-n+4):first-child ~ li { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩	감자 고구마 배추

※ 요소가 4개 이하인 형제 그룹의 요소 선택

※ :nth-last-child(-n+4)는 :nth-last-child(4),:nth-last-child(3),:nth-last-child(2),:nth-last-child(1)에만 적용이 됩니다. 형제 그룹의 요소가 1~4개가 있는 것 중의 :first-child 즉, 제일 첫 번째 요소를 선택합니다.

※ :nth-last-child(-n+4):first-child 4개 이하의 요소 그룹 중 첫 번째 요소와 ~ li 그 이후로 있는 li 전부를 선택합니다. 이로써 4개 이하의 요소를 가진 형제 그룹의 요소만이 선택됩니다.

● 뒤에서부터 x번째 요소 제외하고 선택

/* 리스트의 뒤에서부터 x번째 이외 선택 */
li:not(nth-last-child(3)) {
}

li:not(nth-last-child(3)) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

● 뒤에서부터 홀수 번째

/* 리스트의 마지막을 1로 시작하여 앞쪽으로 홀수 번째 선택 */
li:nth-last-child(odd) {
}
li:nth-last-child(2n-1) {
}

li:nth-last-child(odd) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩

● 뒤에서부터 짝수 번째

/* 리스트의 마지막을 1로 시작하여 앞쪽으로 짝수 번째 선택 */
li:nth-last-child(even) {
}
li:nth-last-child(2n) {
}

li:nth-last-child(even) { background-color: #bdd4ff; }
<ul>    <li>감자</li>    <li>고구마</li>    <li>배추</li>    <li>가지</li>    <li>오이</li>    <li>무</li>    <li>호박</li>    <li>옥수수</li>    <li>콩</li> </ul>	감자 고구마 배추 가지 오이 무 호박 옥수수 콩