CSS3-Selektor den zweiten div der gleichen Klasse zu finden
Frage
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).
Lösung
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 ...
Andere Tipps
Selektoren können kombiniert werden:
.bar:nth-child(2)
bedeutet "was Klasse bar " das ist auch das zweite Kind.
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? : -)
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.
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;}
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>
...
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 {}
.parent_class div:first-child + div
Ich habe nur den über den zweiten div
zu finden, indem erstes Kind mit dem +
Selektor Verkettungs.