Saltar al contenido

Selector CSS3 para encontrar el segundo div de la misma clase

Solución:

Los selectores se pueden combinar:

.bar:nth-child(2)

significa “cosa que tiene clase bar“Ese es también el segundo hijo.

Mi respuesta original con respecto :nth-of-type está simplemente mal. Gracias a Paul por señalar esto.

La palabra “tipo” se refiere solo al “tipo de elemento” (como div). Resulta que los selectores div.bar:nth-of-type(2) y div:nth-of-type(2).bar significa lo mismo. Ambos seleccionan elementos que [a] son los segundos div de sus padres, y [b] tengo clase bar.

Entonces, la única solución CSS pura que me queda, si desea seleccionar todos los elementos de un determinado selector, excepto el primero, es el selector general de hermanos:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp


Mi respuesta original (incorrecta) sigue:

Con la llegada de CSS3, existe otra opción. Es posible que no estuviera disponible cuando se hizo la pregunta por primera vez:

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of-type.asp

Esto selecciona el segundo elemento que satisface la .bar selector.

Si quieres el segundo y ultimo de un tipo específico de elemento (o todos excepto el primero), el selector general de hermanos también funcionaría bien:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

Es mas corto. Pero, por supuesto, no nos gusta duplicar código, ¿verdad? 🙂

ACTUALIZAR: Esta respuesta se escribió originalmente en 2008 cuando nth-of-type el apoyo era poco fiable en el mejor de los casos. Hoy diría que podrías usar con seguridad algo como .bar:nth-of-type(2), a menos que tenga que admitir IE8 y versiones anteriores.


A continuación se muestra la respuesta original de 2008 (¡tenga en cuenta que ya no recomendaría esto!):

Si puede usar Prototype JS, puede usar este código para establecer algunos valores de estilo o agregar otro nombre de clase:

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(No probé este código y no verifica si realmente hay un segundo div presente, pero algo como esto debería funcionar).

Pero si está generando el lado del servidor html, también podría agregar una clase adicional en el segundo elemento …

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *