CSS3 selector para encontrar la 2da div de la misma clase

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:

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

(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…

Selectores pueden ser combinados:

.bar:nth-child(2)

significa «cosa que ha de clase bar» que es también el 2º niño.

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 selectores div.bar:nth-of-type(2) y div:nth-of-type(2).bar significan la misma cosa. Ambos seleccionar los elementos que [a] es la segunda div de sus padres, y [b] clase bar.

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:

.bar ~ .bar

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:

.bar:nth-of-type(2)

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:

.bar ~ .bar

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

.foo:nth-child(2)

HTML

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

Pero si tienes el siguiente código HTML no va a funcionar.

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

Simples palabras, no hay selector para obtener el índice de los partidos del resto del selector de antes.

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/

Y para las personas que están buscando un jQuery compatible respuesta:

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

HTML:

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

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:

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

.foo {}
.foo.last {}

.parent_class div:first-child + div

Acabo de utilizar el de arriba para encontrar el segundo div por el encadenamiento de primer niño con el + selector.