Necesito un selector CSS que puede encontrar la 2da div de 2 que tiene la misma clase. He mirado en nth-child()
pero no es lo que quiero ya no puedo ver una manera de aclarar qué clase de deseo. Estos 2 divs serán hermanos en el documento si que ayuda.
Mi HTML se ve algo como esto:
<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>
Y quiero la 2ª div.bar (o de la última div.barra de trabajar demasiado).
- estrictamente hablando (ya que usted menciona CSS3) :nth-of-type existe, pero es básicamente incompatible. reference.sitepoint.com/css/pseudoclass-nthoftype
- Estoy bastante seguro de
nth-of-type
no ya que ambos elementos sondiv
s. Ver esto: jsfiddle.net/ShUHK/1 en un navegador moderno.
ACTUALIZACIÓN: Esta respuesta fue escrito originalmente en 2008, cuando
nth-of-type
apoyo era poco fiable en el mejor. Hoy en día yo diría que con seguridad podría utilizar algo como.bar:nth-of-type(2)
, a menos que usted tiene para apoyar IE8 y mayores.Respuesta Original a partir de 2008 de la siguiente manera (se Nota que no te lo recomiendo ya!):
Si se puede usar Prototype JS puede utilizar este código para establecer algunos valores de estilo, o añadir otro nombre de la clase:
(Yo no lo prueba este código, y no comprobar si realmente hay un segundo div presente, pero algo como esto debería funcionar.)
Pero si estás generando el código html serverside que bien podría añadir un extra de clase en el segundo…
nth-of-type
no hacer lo que piensa. La nueva respuesta, al igual que mi respuesta anterior, es incorrecto. Ver editado mi respuesta a continuación para obtener más detalles.Selectores pueden ser combinados:
significa «cosa que ha de clase bar» que es también el 2º niño.
.bar
selector. Así que en este caso.bar:nth-child(2) would actually select the 1st
div.la barra de elemento, ya que es de clase «bar» y el 2º hijo de su padre.nth:child
para seleccionar elementos de la mismo padre.Mi respuesta original con respecto a
:nth-of-type
es simplemente incorrecto. Gracias a Pablo por señalar esto.La palabra «tipo» no sólo se refiere al «tipo de elemento» (como
div
). Resulta que los selectoresdiv.bar:nth-of-type(2)
ydiv:nth-of-type(2).bar
significan la misma cosa. Ambos seleccionar los elementos que [a] es la segundadiv
de sus padres, y [b] clasebar
.Por lo que la única puro CSS solución a la izquierda, que yo sepa, si desea seleccionar todos los elementos de un determinado selector excepto el primero, es el general selector de hermanos:
http://www.w3schools.com/cssref/sel_gen_sibling.asp
Original de mi (mal) responder de la siguiente manera:
Con la llegada de CSS3, no hay otra opción. Es posible que no haya estado disponible cuando la pregunta se pidió por primera vez:
http://www.w3schools.com/cssref/sel_nth-of-type.asp
De esta forma se selecciona el segundo elemento que satisface la
.bar
selector.Si quieres la segunda y última de un tipo específico de elemento (o de todos ellos a excepción de la primera), el general selector de hermanos también el trabajo fino:
http://www.w3schools.com/cssref/sel_gen_sibling.asp
Es más corta. Pero, por supuesto, no queremos duplicar código, derecho? 🙂
¿Qué es exactamente la estructura del HTML?
La anterior CSS funcionará si el HTML es como tal:
CSS
HTML
Pero si tienes el siguiente código HTML no va a funcionar.
Simples palabras, no hay selector para obtener el índice de los partidos del resto del selector de antes.
HTML
CSS
DEMO
https://jsfiddle.net/ssuryar/6ka13xve/
Y para las personas que están buscando un jQuery compatible respuesta:
HTML:
Hay una razón que usted no puede hacer esto a través de Javascript? Mi consejo sería el destino de los selectores con una regla universal (
.foo
) y, a continuación, analizar de nuevo a conseguir el último de foo con Javascript y conjunto adicional de estilo que usted necesita.O como sugerido por Stein, sólo tiene que añadir dos clases si usted puede:
Acabo de utilizar el de arriba para encontrar el segundo
div
por el encadenamiento de primer niño con el+
selector.