El selector :n-th-last-of-type() en CSS se usa para diseñar solo aquellos elementos que son el número n de elementos secundarios del elemento principal. El selector cuenta desde el último elemento secundario. Una n puede ser un número, una palabra clave o una fórmula.
Sintaxis:
:nth-last-of-type(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(): 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:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 35px;
}
p:nth-last-of-type(3) {
background: green;
color: white;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>CSS:nth-last-of-type() Selector </h2>
<p class="geeksFORGEEKS">geeksforgeeks</div>
<p class="forgeeks">A computer science portal for geeks.</div>
<p class="geeks">Sudo placement.</p>
<p class="SUDO">GFG STANDS FOR GEEKSFORGEEKS.</p>
</body>
</html>
Producción :
Ejemplo-2: En este ejemplo, cada elemento par se selecciona de acuerdo con la fórmula 2n contando desde el final.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-last-of-type Selector</title>
<style>
table {
border: 1px solid green;
margin: auto;
}
/* Selects the last three element */
tr:nth-last-of-type(2n) {
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-last-of-type 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-of-type() Selector se enumeran a continuación:
- safari de manzana
- Google Chrome
- Firefox
- Ópera
- explorador de Internet
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA