Pseudo-clase CSS :nth-last-child
La pseudo-clase :nth-last-child() selecciona elementos según su índice, empezando desde el último elemento hacia arriba.
La pseudo-clase :nth-last-child() puede especificarse mediante un número, una palabra clave o una fórmula.
Valores de palabra clave
odd
Selecciona elementos con índices impares (p. ej., 1, 3, 5, 7, etc.).
even
Selecciona elementos con índices pares (p. ej., 2, 4, 6, 8, etc.).
Notación funcional
<An+B>
Selecciona elementos cuya posición numérica coincide con el patrón An+B (para cada valor entero no negativo de n). El índice del primer elemento es 1, y n en la fórmula comienza desde 0. Los valores A y B deben ser enteros y pueden ser negativos. A define la longitud del patrón y B define el desplazamiento.
Versión
Sintaxis
Sintaxis de CSS :nth-last-child
selector:nth-last-child() {
css declarations;
}Ejemplo del selector :nth-last-child():
Ejemplo de CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ejemplo de las palabras clave "odd" y "even":
Ejemplo de código CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Ejemplo de :nth-last-child() con la etiqueta <table>:
Nota: para que se seleccione tr, debe ser un hijo directo de tbody o table.
Ejemplo de código CSS :nth-last-child con la etiqueta table
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Ejemplo de :nth-last-child() con la etiqueta <li>:
Ejemplo de código CSS :nth-last-child con la etiqueta ul
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Práctica
¿Qué es cierto sobre la pseudo-clase nth-last-child en CSS?