CSS3-Selektor den zweiten div der gleichen Klasse zu finden

Question

Ich brauche einen CSS-Selektor, der die zweite div von 2, die die gleiche Klasse hat finden können. Ich habe bei nth-child() aussehen, aber es ist nicht das, was ich will, da ich keine Möglichkeit, weiter zu klären, welche Klasse ich will sehen kann. Diese 2 divs wird Geschwister in dem Dokument, wenn das hilft.

Meine HTML sieht etwa so aus:

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

Und ich will die 2. div.bar (oder der letzten div.bar funktionieren würde auch).

Answer 1

UPDATE : Diese Antwort ursprünglich im Jahr 2008 geschrieben wurde, als nth-of-type Unterstützung unzuverlässig war besten. Heute würde ich sagen, dass Sie sicher etwas wie .bar:nth-of-type(2) verwenden könnte, es sei denn, Sie IE8 unterstützen müssen und älter.

---

Original Antwort von 2008 wie folgt (Beachten Sie, dass ich das nicht empfehlen würde mehr!) :

Wenn Sie verwenden Prototype JS können Sie diesen Code verwenden, um einige Stilwerte zu setzen, oder einen anderen Klassennamen hinzufügen :

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

(Ich habe diesen Code nicht testen, und es prüft nicht, ob es tatsächlich eine zweite div vorhanden ist, aber so etwas wie dies funktionieren soll.)

Aber wenn Sie die HTML-Serverside sind zu erzeugen könnten Sie genauso gut eine Extraklasse auf dem zweiten Element hinzufügen ...

Answer 2

Selektoren können kombiniert werden:

.bar:nth-child(2)

bedeutet "was Klasse bar " das ist auch das zweite Kind.

Answer 3

Meine ursprüngliche Antwort in Bezug auf :nth-of-type ist einfach falsch. Dank Paul diese aus für den Hinweis.

Das Wort „type“ gibt, bezieht sich nur auf den „Elementtyp“ (wie div). Es stellt sich heraus, dass die Wähler div.bar:nth-of-type(2) und div:nth-of-type(2).bar das gleiche bedeuten. Beide wählen Sie Elemente, die [a] die zweite div ihrer Eltern sind, und [b] haben Klasse bar.

So ist die einzige reine CSS-Lösung verlassen, dass ich bin mir dessen bewusst, wenn Sie alle Elemente eines bestimmten Selektor mit Ausnahme der ersten auswählen möchten, ist die allgemeine Geschwister-Selektor:

.bar ~ .bar

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

---

Meine ursprüngliche (falsche) Antwort folgt:

Mit der Ankunft von CSS3 gibt es eine weitere Option. Es ist möglicherweise nicht verfügbar gewesen sein, als die Frage zum ersten Mal gefragt wurde:

.bar:nth-of-type(2)

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

Dies wählt das zweite Element, das den Selektor .bar erfüllt.

Wenn Sie die zweite und letzte wollen einer bestimmten Art von Element (oder alle außer dem ersten), die allgemeine Geschwister Wähler auch in Ordnung funktionieren würde:

.bar ~ .bar

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

Es ist kürzer. Aber natürlich, wir möchten Code nicht duplizieren, nicht wahr? : -)

Answer 4

Was genau ist die Struktur Ihres HTML?

Die vorherige CSS wird funktionieren, wenn die HTML als solche ist:

CSS

.foo:nth-child(2)

HTML

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

Aber wenn Sie die folgenden HTML haben wird es nicht funktionieren.

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

Einfache Put, gibt es keine Wähler für das den Index der Spiele vom Rest des Wählers, bevor es zu bekommen.

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

Und für Menschen, die für eine jQuery kompatible Antwort suchen:

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

HTML:

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

Answer 7

Gibt es einen Grund, dass Sie dies über Javascript nicht tun können? Mein Rat wäre, die Wähler mit einer allgemeinen Regel zum Ziel (.foo) und dann zu analysieren, zurück über die letzt foo mit Javascript zu erhalten und setzen zusätzliche Styling Sie benötigen.

oder, wie von Stein vorgeschlagen, fügen Sie einfach zwei Klassen, wenn Sie können:

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

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

Ich habe nur den über den zweiten div zu finden, indem erstes Kind mit dem + Selektor Verkettungs.