¿Cómo puedo usar la pseudo clase nth-of-type con un selector complejo?
Buen día a todos, tengo varios elementos con la clase ‘someclass’ y el nombre ‘somename’, y un selector complejo como:
.someclass[name=”somename”]
Y quiero agregar estilo solo al segundo elemento. Así que intento
.someclass[name=”somename”]:nth-of-type(2) {}
pero no funciona como debería funcionar. Mientras que si el selector no es complejo, por ejemplo, simplemente:
.someclass:nth-of-type(2) {}
funciona normalmente. Intenté diferentes tipos de corchetes, pero aún tengo este problema. ¿Cuál es la solución?
ACTUALIZACIÓN: Estaba buscando una forma de utilizar nth-of-type para elementos que no van uno por uno.
Mi código era así:
1
2
3
4
5
¡Por eso mi código no funcionaba! Finalmente hay algunas soluciones en los comentarios.
davy.ai
Para agregar estilo solo al segundo elemento en un selector complejo, puedes usar la pseudo-clase :nth-of-type(), pero solo funciona para elementos que sean del mismo tipo y sean hermanos. En este caso, parece que estás intentando apuntar al segundo elemento con clase “someclass” y nombre “somename”, que no es el mismo que el primer elemento.
Una solución es usar la pseudo-clase :nth-of-type() con un selector más específico que coincida con el elemento que quieres apuntar. Por ejemplo:
Si esto aún no funciona, revisa tu código HTML para asegurarte de que los elementos que quieres apuntar sean en realidad hermanos y tengan el mismo tipo y atributos.
Actualización: Basado en la información actualizada, parece que los elementos con clase “someclass” y nombre “somename” no son hermanos del mismo tipo, por lo que la pseudo-clase :nth-of-type() no funcionará. En este caso, puedes usar la pseudo-clase :nth-child() para apuntar al segundo elemento según su posición en el contenedor padre. Por ejemplo:
Alternativamente, puedes darle al segundo elemento una clase o ID única y apuntar directamente a él, sin depender de la posición o atributos del elemento.