web-dev-qa-db-fra.com

Sélecteur CSS3 pour trouver le 2ème div de la même classe

J'ai besoin d'un sélecteur CSS qui peut trouver le 2ème div de 2 qui a la même classe. J'ai regardé nth-child() mais ce n'est pas ce que je veux car je ne vois pas un moyen de clarifier davantage quelle classe je veux. Ces 2 divs seront frères et sœurs dans le document si cela aide.

Mon HTML ressemble à ceci:

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

Et je veux que la 2e div.bar (ou la dernière div.bar fonctionne aussi).

csscss3
25
mpeters

[~ # ~] mise à jour [~ # ~] : Cette réponse a été écrite à l'origine en 2008 lorsque le support de nth-of-type n'était au mieux pas fiable. Aujourd'hui, je dirais que vous pouvez utiliser en toute sécurité quelque chose comme .bar:nth-of-type(2), sauf si vous devez prendre en charge IE8 et les versions antérieures.

La réponse originale de 2008 suit (notez que je ne recommanderais plus cela!):

Si vous pouvez utiliser Prototype JS vous pouvez utiliser ce code pour définir des valeurs de style ou ajouter un autre nom de classe:

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

(Je n'ai pas testé ce code, et il ne vérifie pas s'il y a réellement un deuxième div, mais quelque chose comme ça devrait fonctionner.)

Mais si vous générez le côté serveur html, vous pourriez tout aussi bien ajouter une classe supplémentaire sur le deuxième élément ...

25
Stein G. Strindhaug

Les sélecteurs peuvent être combinés:

.bar:nth-child(2)

signifie "chose qui a une classe bar" qui est aussi le 2ème enfant.

38
geocar

Ma réponse originale concernant :nth-of-type Est tout simplement fausse. Merci à Paul de l'avoir signalé.

Le mot "type" n'y fait référence qu'au "type d'élément" (comme div). Il s'avère que les sélecteurs div.bar:nth-of-type(2) et div:nth-of-type(2).bar signifient la même chose. Les deux éléments select qui [a] sont le deuxième div de leur parent et [b] ont la classe bar.

Donc, la seule solution CSS pure à ma connaissance, si vous souhaitez sélectionner tous les éléments d'un certain sélecteur à l'exception du premier, est le sélecteur frère général:

.bar ~ .bar

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

Ma réponse originale (fausse) suit:

Avec l'arrivée de CSS3, il y a une autre option. Il n'était peut-être pas disponible lors de la première question posée:

.bar:nth-of-type(2)

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

Ceci sélectionne le deuxième élément qui satisfait le sélecteur .bar.

Si vous voulez la seconde et dernière d'un type d'élément spécifique (ou tous sauf le premier), le sélecteur de frère général fonctionnerait également très bien:

.bar ~ .bar

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

C'est plus court. Mais bien sûr, nous n'aimons pas dupliquer le code, non? :-)

24
mhelvens

Quelle est exactement la structure de votre HTML?

Le CSS précédent fonctionnera si le HTML est en tant que tel:

CSS 

.foo:nth-child(2)

HTML 

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

Mais si vous avez le code HTML suivant, cela ne fonctionnera pas.

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

En termes simples, il n'y a pas de sélecteur pour obtenir l'index des correspondances du reste du sélecteur avant lui.

13
Seamus

[~ # ~] 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;}

DÉMO https://jsfiddle.net/ssuryar/6ka13xve/

9
Surya R Praveen

Et pour les personnes qui recherchent une réponse compatible jQuery:

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

HTML:

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

Y a-t-il une raison pour laquelle vous ne pouvez pas le faire via Javascript? Mon conseil serait de cibler les sélecteurs avec une règle universelle (.foo), puis réanalyser pour obtenir le dernier truc avec Javascript et définir tout style supplémentaire dont vous aurez besoin.

Ou, comme l'a suggéré Stein, ajoutez simplement deux classes si vous le pouvez:

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

.foo {}
.foo.last {}
2
One Crayon
.parent_class div:first-child + div

J'ai juste utilisé ce qui précède pour trouver le deuxième div en enchaînant le premier enfant avec le + sélecteur.

1
Eric Hendrickson