una - selectores css avanzados

Selector CSS3 para encontrar el 2º div de la misma clase

Question

Necesito un selector de CSS que pueda encontrar el 2º div de 2 que tenga la misma clase. Miré nth-child() pero no es lo que quiero, ya que no veo la manera de aclarar qué clase quiero. Estos 2 divs serán hermanos en el documento si eso ayuda.

Mi HTML se ve así:

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

Y quiero que el segundo div.bar (o el último div.bar también funcione).

Answer 1

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

O como lo sugiere Stein, solo agrega dos clases si puedes:

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

.foo {}
.foo.last {}

Answer 2

Los selectores se pueden combinar:

.bar:nth-child(2)

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

Answer 3

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 4

.parent_class div:first-child + div

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

Answer 5

ACTUALIZACIÓN : esta respuesta se escribió originalmente en 2008 cuando la compatibilidad de nth-of-type no era confiable en el mejor de los casos. Hoy diría que puede usar de forma segura algo como .bar:nth-of-type(2) , a menos que tenga que soportar IE8 y versiones anteriores.

La respuesta original de 2008 sigue (¡Tenga en cuenta que ya no lo recomendaría más!) :

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 así debería funcionar).

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

Answer 6

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 7

¿Cuál es exactamente la estructura de tu 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 tienes 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 selector para obtener el índice de las coincidencias del resto del selector anterior.

Answer 8

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

La palabra "tipo" allí 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 significan lo mismo. Ambos seleccionan elementos que [a] son ​​el segundo div de su elemento primario y [b] tienen una bar clase.

Por lo tanto, la única solución pura de CSS 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, hay otra opción. Puede 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 elemento de un tipo específico (o todos ellos, 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 más corto. Pero, por supuesto, no nos gusta duplicar el código, ¿verdad? :-)