El selector nth-last-child() en CSS se usa para hacer coincidir elementos en función de su posición entre el grupo de hermanos, contando desde el final.
Sintaxis:
:nth-last-child(number) {
//CSS Property
}
Donde número es el argumento que representa el patrón para elementos coincidentes contando desde el final. Puede ser impar, par o en notación funcional.
- impar: Representa elementos cuya posición es impar en una serie: 1, 3, 5, etc., contando desde el final.
- par: Representa los elementos cuya posición es par en una serie: 2, 4, 6, etc., contando desde el final.
- notación funcional (<An+B>): Representa elementos cuya posición de hermanos coincide con el patrón An+B, para todo entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1.
Ejemplo-1: En este ejemplo, cada elemento impar se selecciona de acuerdo con la fórmula 2n+1, contando desde el final.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-last-child Selector</title>
<style>
p:nth-last-child(2n+1) {
background: green;
color:white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-last-child Selector
</h2>
<p>A computer science portal for geeks.</p>
<p>Geeks classes an extensive classroom programme.</p>
</body>
</html>
Salida: 
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-last-child Selector</title>
<style>
table {
border: 1px solid green;
margin:auto;
}
/* Selects the last three element */
tr:nth-last-child(3) {
background-color: green;
color:white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-last-child Selector
</h2>
<table>
<tbody>
<tr>
<td>Merge sort</td>
</tr>
<tr>
<td>Quick sort</td>
</tr>
<tr>
<td>Insertion sort</td>
</tr>
<tr>
<td>Selection sort</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con :nth-last-child selector se enumeran a continuación:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Ópera 9.6
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA