Selector de elementos según tipo :nth-of-type y nth-last-of-type

Home » Blog » Selector de elementos según tipo :nth-of-type y nth-last-of-type

Desde la versión de JQUERY 1.9 surgieron nuevos selectores para facilitar el acceso a los elementos del DOM. Si queremos seleccionar el X elemento hijo de un padre que tenga un atributo concreto, podemos usar el atributo :nth-of-type. La otra versión es a la inversa que empiece a contar desde abajo :nth-last-of-type.

Por ejemplo: queremos mostrar solo los elementos li en 4ª posición del elemento padre ul pero siempre que el 4º elemento tenga un id=XXXX.

Ejemplos, selectores :nth-of-type y :nth-last-of-type

<!DOCTYPE html>
<html>
<head>
 <title>Selector de elementos en función de su tipo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('#miId').click(function(){ 
 $('li.pr:nth-of-type(2)').css({"border":"1px solid red"});
 }); 
 $('h2').click(function(){ 
 $('li:nth-last-of-type(2)').css({"border":"1px solid red"});
 }); 
 });
 </script>
 <style>
 *{
 width: 100%;
 margin: 0 auto; 
 } 
 </style>
</head>
<body>
 <h1 id='miId'>Selector de elementos en función de su tipo (li.pr)</h1> 
 <ul>
 <li class="pr">
 Lista 1
 </li>
 <li>
 Lista 2
 </li>
 <li class="pr">
 Lista 3
 </li>
 <li>
 Lista 4
 </li>
 <li class="pr">
 Lista 5
 </li>
 </ul> 
 <h2>Selector de elementos en función de su tipo (li)</h2>
 <ul>
 <li>
 Lista 1
 </li>
 <li class="pr">
 Lista 2
 </li>
 <li>
 Lista 3
 </li>
 <li>
 Lista 4
 </li>
 <li class="pr">
 Lista 5
 </li>
 </ul>
</body>
</html>

En este caso el código sigue siendo muy sencillo, lo que cuesta es entender el funcionamiento:

//desde arriba, busca los li.pr en la segunda posición respecto al ul
$('li.pr:nth-of-type(2)').css({"border":"1px solid red"});
//desde abajo busca todos los li en la posición 2
$('li:nth-last-of-type(2)').css({"border":"1px solid red"});

En el primer ejemplo, buscamos todos los li con clase=pr que estén en la posición 2 del padre ul. En el ejemplo, al clicar sobre el primer texto vemos como se selecciona un li del segundo ul, por que en el primero no tienen la clase=pr. En el segundo, buscamos de abajo arriba todos los li en posición 2.

En este caso se comienza a contar considerando al primer elemento como 1.

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023

Comentarios

Deja una respuesta