Selettore CSS3 per trovare il 2 ° div della stessa classe

Question

Ho bisogno di un selettore CSS in grado di trovare il 2 ° div di 2 che abbia la stessa classe. Ho guardato nth-child () ma non è quello che voglio poiché non riesco a vedere un modo per chiarire ulteriormente quale classe voglio. Queste 2 div saranno fratelli nel documento se questo aiuta.

Il mio HTML è simile al seguente:

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

E voglio la seconda div.bar (o anche l'ultima div.bar funzionerebbe).

Answer 1

AGGIORNAMENTO : questa risposta è stata originariamente scritta nel 2008 quando il supporto per nth-of-type non era affidabile. Oggi direi che potresti tranquillamente usare qualcosa come .bar: nth-of-type (2) , a meno che tu non debba supportare IE8 e precedenti.

---

Segue la risposta originale del 2008 (nota che non lo consiglierei più!) :

Se puoi utilizzare Prototype JS puoi utilizzare questo codice per impostare alcuni valori di stile o aggiungere un altro nome di classe :

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

(Non ho testato questo codice e non controlla se in realtà è presente un secondo div presente, ma qualcosa del genere dovrebbe funzionare.)

Ma se stai generando il lato server html potresti anche aggiungere una classe in più sul secondo elemento ...

Answer 2

I selettori possono essere combinati:

.bar:nth-child(2)

significa " cosa che ha classe bar " quello è anche il secondo figlio.

Answer 3

La mia risposta originale su : nth-of-type è semplicemente sbagliata. Grazie a Paul per averlo segnalato.

La parola " tipo " ci si riferisce solo al "tipo di elemento" (come div ). Si scopre che i selettori div.bar:nth-of-type(2) e div: nth-of-type (2) .bar significano la stessa cosa. Entrambi selezionano gli elementi che [a] sono il secondo div del loro genitore e [b] hanno la classe bar .

Quindi l'unica soluzione CSS pura di cui sono a conoscenza, se si desidera selezionare tutti gli elementi di un determinato selettore tranne il primo, è il selettore di pari livello:

.bar ~ .bar

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

---

La mia risposta originale (errata) segue:

Con l'arrivo di CSS3, c'è un'altra opzione. Potrebbe non essere stato disponibile alla prima domanda:

.bar:nth-of-type(2)

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

Seleziona il secondo elemento che soddisfa il selettore .bar .

Se vuoi il secondo e ultimo di un tipo specifico di elemento (o tutti loro tranne il primo), anche il selettore di pari livello funzionerebbe bene:

<*>

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

È più corto. Ma ovviamente, non ci piace duplicare il codice, giusto? : -)

Answer 4

Qual è esattamente la struttura del tuo HTML?

Il CSS precedente funzionerà se l'HTML è come tale:

CSS

.foo:nth-child(2)

HTML

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

Ma se hai il seguente HTML non funzionerà.

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

In poche parole, non esiste un selettore per ottenere l'indice delle partite dal resto del selettore prima di esso.

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

E per le persone che cercano una risposta compatibile 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

C'è un motivo per cui non puoi farlo tramite Javascript? Il mio consiglio sarebbe di scegliere come target i selettori con una regola universale ( .foo ) e quindi analizzare di nuovo per ottenere l'ultimo foo con Javascript e impostare qualsiasi stile aggiuntivo necessario.

O come suggerito da Stein, aggiungi solo due classi se puoi:

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

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

Ho appena usato quanto sopra per trovare il secondo div concatenando il primo figlio con il selettore + .