El Selector :nth-last-of-type() se utiliza para seleccionar todos los hijos de un padre con el mismo nombre de elemento, contando desde el último hasta el primero. Utiliza conteo indexado 1.
Sintaxis:
element:nth-last-of-type(n|even|odd|formula)
Parámetros:
- n: Selecciona el enésimo elemento del último.
- even: selecciona todos los elementos pares desde el último.
- impar: selecciona todos los elementos impares desde el último.
- fórmula: contiene la fórmula para generar la agrupación de elementos, comenzando desde el último, por ejemplo: 3n+2 selecciona cada elemento que es la salida de esta expresión tomando valores de n-0, 1, 2, …
Ejemplo 1: este ejemplo utiliza el selector :nth-last-of-type() para seleccionar el elemento impar desde el último.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | :nth-last-of-type() Selector
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
Computer Science Subjects
<ul>
<li>Data Structure</li>
<li>Algorithm Analysis</li>
<li>Operating System</li>
<li>Computer Networks</li>
<li>Web Technology</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Java</li>
</ul>
<!-- Script to use :nth-last-of-type() Selector -->
<script>
$(document).ready(function() {
var el = $("ul li:nth-last-of-type(odd)").css({
background: "green"
});
});
</script>
</body>
</html>
Producción
Ejemplo 2: este ejemplo utiliza el selector :nth-last-of-type() para seleccionar el último elemento.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery | :nth-last-of-type() Selector
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<section>
<article>
<p>Company - GeeksforGeeks</p>
<p>Name - ABC</p>
<p>Email - abc@geeksforgeeks.org</p>
</article>
<article>
<p>Company - GFG</p>
<p>Name - XYZ</p>
<p>Email - xyz@gfg.org</p>
</article>
<article>
<p>Company - G4G</p>
<p>Name - Geeks</p>
<p>Email - geeks@g4g.org</p>
</article>
</section>
<!-- Script to use :nth-last-of-type() selector -->
<script>
$(document).ready(function() {
$("article p:first-of-type").css({
fontWeight:"bold",
fontSize:'1.2rem'
})
$("article p:nth-last-of-type(1)").css({
fontStyle:'italic',
opacity:0.8
})
})
</script>
<body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA