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

Question

J'ai besoin d'un sélecteur CSS capable de trouver la deuxième div de 2 ayant la même classe. J'ai examiné nth-child () , mais ce n'est pas ce que je veux car je ne vois pas comment clarifier davantage la classe que je veux. Si cela vous aide, ces deux divs seront des frères et soeurs dans le document.

Mon code HTML ressemble à quelque chose comme ceci:

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

Et je veux le 2nd div.bar (ou le dernier div.bar fonctionnerait aussi).

Answer 1

UPDATE : cette réponse a été écrite en 2008, alors que la prise en charge de n-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 le recommanderais plus!) :

Si vous pouvez utiliser le prototype JS , vous pouvez utiliser ce code pour définir certaines 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 bien une deuxième div, mais quelque chose comme cela devrait fonctionner.)

Mais si vous générez le côté HTML du serveur, vous pouvez également ajouter une classe supplémentaire sur le second élément ...

Answer 2

Les sélecteurs peuvent être combinés:

.bar:nth-child(2)

signifie "chose qui a la classe bar " c'est aussi le 2e enfant.

Answer 3

Ma réponse initiale concernant : le type de type est simplement fausse. Merci à Paul de l'avoir signalé.

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

Donc, la seule solution CSS pure qui me reste à connaître, si vous souhaitez sélectionner tous les éléments d'un sélecteur donné, à l'exception du premier, est le sélecteur général de même parent:

.bar ~ .bar

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

Voici ma réponse originale (fausse):

Avec l’arrivée de CSS3, il existe une autre option. Il n’était peut-être pas disponible lorsque la question a été posée pour la première fois:

.bar:nth-of-type(2)

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

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

Si vous voulez la seconde et la dernière d'un type d'élément spécifique (ou de tous les éléments sauf le premier), le sélecteur de frères et sœurs fonctionne également très bien:

<*>

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? : -)

Answer 4

Quelle est exactement la structure de votre code HTML?

Le CSS précédent fonctionnera si le code HTML est tel quel:

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’existe aucun sélecteur permettant d’obtenir l’index des correspondances du reste du sélecteur le précédant.

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

Et pour ceux 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>
  ...    

Answer 7

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 de réanalyser pour obtenir le dernier mot avec Javascript et définir le style supplémentaire dont vous aurez besoin.

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

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

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

Je viens d'utiliser ce qui précède pour trouver le deuxième div en chaînant le premier enfant avec le sélecteur + .