Selector CSS3 para encontrar el segundo div de la misma clase

Question

Necesito un selector CSS que pueda encontrar el segundo div de 2 que tenga la misma clase. He visto nth-child () pero no es lo que quiero, ya que no puedo ver una manera de aclarar aún más qué clase quiero. Estos 2 divs serán hermanos en el documento si eso ayuda.

Mi HTML se parece a esto:

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

Y quiero el segundo div.bar (o el último div.bar también funcionaría).

Answer 1

ACTUALIZACIÓN : esta respuesta se escribió originalmente en 2008 cuando el soporte de enésimo tipo no era confiable en el mejor de los casos. Hoy diría que podría usar de manera segura algo como .bar: nth-of-type (2) , a menos que tenga que admitir IE8 y versiones anteriores.

---

Sigue 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 comprueba si realmente hay un segundo div presente, pero algo como esto debería funcionar).

Pero si está generando el servidor html, podría agregar una clase adicional en el segundo elemento ...

Answer 2

Los selectores se pueden combinar:

.bar:nth-child(2)

significa " cosa que tiene la clase barra " ese es también el segundo hijo.

Answer 3

Mi respuesta original con respecto a : enésimo tipo es simplemente incorrecta. Gracias a Paul por señalar esto.

La palabra " tipo " allí solo se refiere al " tipo de elemento " (como div ). Resulta que los selectores div.bar:nth-of-type(2) y div: nth-of-type (2) .bar significan lo mismo. Ambos elementos seleccionados que [a] son ??el segundo div de su padre y [b] tienen la clase bar .

Entonces, la única solución pura de CSS que conozco, si desea seleccionar todos los elementos de un cierto 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, hay otra opción. Es posible que no haya estado 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 el selector .bar .

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

<*>

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

Es más corto. Pero, por supuesto, no nos gusta duplicar el código, ¿verdad? :-)

Answer 4

¿Cuál es exactamente la estructura de su HTML?

El CSS anterior funcionará si el HTML es como tal:

CSS

.foo:nth-child(2)

HTML

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

Pero si tiene el siguiente HTML, no funcionará.

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

En pocas palabras, no hay un selector para obtener el índice de las coincidencias del resto del selector anterior.

Answer 5

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

DEMO https://jsfiddle.net/ssuryar/6ka13xve/

Answer 6

Y para las personas que buscan una respuesta compatible con jQuery:

$('.foo:eq(1)').css('color', 'red');

HTML:

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...    

Answer 7

¿Hay alguna razón por la que no puede hacer esto a través de Javascript? Mi consejo sería apuntar a los selectores con una regla universal ( .foo ) y luego volver a analizar para obtener el último foo con Javascript y establecer cualquier estilo adicional que necesite.

O como lo sugiere Stein, simplemente agregue dos clases si puede:

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

Acabo de usar lo anterior para encontrar el segundo div encadenando al primer hijo con el selector + .