Domanda Selettore CSS3 per trovare il 2 ° div della stessa classe


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

Il mio codice HTML è simile a questo:

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

E voglio il 2 ° div.bar (o anche l'ultimo div.bar funzionerebbe).


20
2017-11-20 17:05


origine


risposte:


AGGIORNARE: Questa risposta è stata originariamente scritta nel 2008 quando nth-of-type il supporto era inaffidabile al meglio. Oggi direi che potresti usare tranquillamente qualcosa del genere .bar:nth-of-type(2), a meno che non sia necessario supportare IE8 e versioni precedenti.


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

Se puoi usare Prototipo JS puoi usare 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 c'è effettivamente un secondo div presente, ma qualcosa del genere dovrebbe funzionare.)

Ma se stai generando il server html potresti anche aggiungere una classe extra al secondo elemento ...


19
2017-11-20 17:41



I selettori possono essere combinati:

.bar:nth-child(2)

significa "cosa che ha classe bar"Questo è anche il 2 ° figlio.


32
2017-11-20 17:12



La mia risposta originale riguardo :nth-of-type è semplicemente sbagliato. Grazie a Paul per averlo indicato.

La parola "tipo" qui 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 significa la stessa cosa Entrambi selezionano gli elementi che [a] sono il secondo div del loro genitore e [b] hanno 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 generale di pari livello:

.bar ~ .bar

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


La mia risposta originale (sbagliata) segue:

Con l'arrivo di CSS3, c'è un'altra opzione. Potrebbe non essere stato disponibile quando la domanda è stata posta per la prima volta:

.bar:nth-of-type(2)

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

Questo seleziona il secondo elemento che soddisfa il .bar selettore.

Se vuoi il secondo e ultimo di un tipo specifico di elemento (o tutti tranne il primo), il selettore generale del fratello potrebbe anche funzionare bene:

.bar ~ .bar

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

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


15
2017-09-29 10:40



Qual è esattamente la struttura del tuo HTML?

Il precedente CSS funzionerà se l'HTML è così:

CSS

.foo:nth-child(2)

HTML

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

Ma se hai il seguente codice HTML non funzionerà.

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

Semplicemente, non esiste un selettore per ottenere l'indice delle corrispondenze dal resto del selettore prima di esso.


11
2017-11-20 17:23



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>
  ...    

6
2018-06-24 13:17



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/


2
2018-03-14 08:22



C'è una ragione per cui non puoi farlo tramite Javascript? Il mio consiglio sarebbe di indirizzare i selezionatori con una regola universale (.foo) e quindi analizzare di nuovo per ottenere l'ultimo pippo 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 {}

1
2017-11-20 17:43