Wie wähle ich das erste, zweite oder dritte Element mit einem bestimmten Klassennamen aus?

76

Wie kann ich ein bestimmtes Element in einer Liste von Elementen auswählen? Ich habe folgendes:

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

Ich habe die CSS-Klasse div.myclass {doing things}, die natürlich für alle gilt, aber ich wollte auch die erste, zweite oder dritte Klasse .myclassdieser Klasse auswählen können, unabhängig davon, wo sie sich im Markup befinden :

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

Fast wie die jQuery-Indexauswahl .eq( index ), die ich derzeit verwende, aber ich brauche eine Alternative ohne Skript.

Um genau zu sein, suche ich nach Pseudo-Selektoren, nicht nach Dingen wie dem Hinzufügen einer weiteren Klasse oder der Verwendung von IDs, damit die Dinge funktionieren.

css  css-selectors  pseudo-class 
— Tumharyyaaden
quelle
3
Wie wäre es mit dem n-ten Kind des CSS , haben Sie das versucht ...? Hinweis: Dies funktioniert nur in modernen Browsern
— Sarfraz
4
Dieser Hinweis scheint gleichbedeutend mit "No IE" zu sein.
— Extraneon
1
@extraneon: Ja, du hast es richtig gemacht :)
— Sarfraz
2
Dies würde nicht funktionieren, da es keine einheitlichen übergeordneten Container gibt, weshalb ich eher anhand des Auftretens des Klassennamens auswählen wollte. Ich müsste mir jede einzelne Instanz ansehen und das übergeordnete Tag, die ID oder die Klasse herausfinden, um das untergeordnete Element auszuwählen. Dies ist nicht einheitlich und schwer zu lesen und muss auch aktualisiert werden, wenn sich übergeordnete Objekte / Attribute ändern.
— Tumharyyaaden
1
Das n-te Kind wird jetzt von IE 9+ unterstützt.
— Awilkinson

Antworten:

32

Sie haben dies wahrscheinlich zwischen dem Posten dieser Frage und dem heutigen Tag endlich erkannt, aber die Natur der Selektoren macht es unmöglich, durch hierarchisch nicht verwandte HTML-Elemente zu navigieren.

Oder, um es einfach auszudrücken, da Sie das in Ihrem Kommentar gesagt haben

Es gibt keine einheitlichen übergeordneten Container

... es ist einfach nicht möglich mit Selektoren allein, ohne das Markup in irgendeiner Weise zu ändern, wie die anderen Antworten zeigen.

Sie müssen die jQuery- .eq()Lösung verwenden.

— BoltClock
quelle
Ja, ich war mir der hierarchischen Probleme von CSS bewusst, aber es war wohl ein Wunschdenken, das mich motivierte, diese Warteschlange trotzdem zu posten.
— Tumharyyaaden
5
Sie müssen nicht die .eq()Funktionen von jQuery verwenden, Sie können es ganz einfach mit einfachem JavaScript tun: document.querySelector(".myclass")[n]wobei n die gewünschte Zahl ist
— Zach Saucier
6
@ Zach Saucier: Das war vor 5 Jahren. (... 4 und eine halbe.)
— BoltClock
5
@ZachSaucier * ahem * Sie vermissen " Alle " an Ihrer Abfrageauswahl 😉
— KarelG
Beispiel: document.querySelectorAll (". Class") [1]
— JohnP2
63

Verwenden Sie das n-te Kind (Artikelnummer) EX

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.parent_class:nth-child(1) { };
.parent_class:nth-child(2) { };
.parent_class:nth-child(3) { };

ODER

: n-ter Typ (Artikelnummer) entspricht Ihrem Code

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };
— Bdwey
quelle
35
-1 Sie (und alle, die diese Antwort positiv bewertet haben) scheinen den Teil "Einige andere Code + Container" falsch verstanden zu haben. Es ist nicht wörtlich dieser Text. Es sind andere Elemente . Wenn Sie andere div-Elemente unter diesen haben, funktionieren Ihre Selektoren nicht mehr.
— BoltClock
@BoltClock, Ihr Kommentar kam mir zunächst falsch vor ... bis ich weiter nachforschte. Siehe meine "Antwort" auf derselben Seite, die das Problem zeigt, auf das Sie (glaube ich) hinweisen wollten. Vielen Dank für Ihr Fachwissen.
— Andrew Willems
15

Ja, das kannst du machen. Um beispielsweise die td-Tags zu formatieren, aus denen die verschiedenen Spalten einer Tabelle bestehen, können Sie Folgendes tun:

table.myClass tr > td:first-child /* First column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td /* Second column */
{
  /* some style here */
}
table.myClass tr > td:first-child+td+td /* Third column */
{
  /* some style here */
}
— David
quelle
4
Vielleicht wäre das n-te Kind eine bessere Lösung: w3.org/TR/selectors/#nth-child-pseudo
— David
17
-1 Bei der Frage geht es darum, das n-te einer Reihe nicht verwandter Elemente mit Klassennamen auszuwählen, nicht das n-te Kind.
— BoltClock
13

Dies ist weniger eine Antwort als eine Nichtantwort, dh ein Beispiel, das zeigt, warum eine der oben genannten Antworten tatsächlich falsch ist.

Ich fand diese Antwort gut. Tatsächlich gab es mir das, wonach ich suchte: :nth-of-typewas für meine Situation funktionierte. (Also, danke dafür, @Bdwey.)

Ich las zunächst den Kommentar von @BoltClock (der besagt, dass die Antwort im Wesentlichen falsch ist) und lehnte ihn ab, da ich meinen Anwendungsfall überprüft hatte und er funktionierte. Dann wurde mir klar, dass @BoltClock einen Ruf von über 300.000 (!) Hatte und ein Profil hat, in dem er behauptet, ein CSS-Guru zu sein. Hmm, dachte ich, vielleicht sollte ich etwas genauer hinsehen.

Es stellt sich wie folgt heraus: div.myclass:nth-of-type(2)bedeutet NICHT "die 2. Instanz von div.myclass". Es bedeutet vielmehr "die 2. Instanz von div, und es muss auch die Klasse 'myclass' haben". Dies ist eine wichtige Unterscheidung, wenn divzwischen Ihren div.myclassInstanzen interveniert wird .

Ich brauchte einige Zeit, um mich damit zu beschäftigen. Also, um andere hilft es heraus schneller heraus, habe ich ein Beispiel geschrieben , die ich glaube , das Konzept mehr zeigt deutlich , als eine schriftliche Beschreibung: Ich habe die entführte h1, h2, h3und h4Elemente im Wesentlichen sein divs. Ich habe Aeinigen von ihnen eine Klasse zugewiesen, sie in 3er gruppiert und dann die 1., 2. und 3. Instanz mit blau, orange und grün gefärbt h?.A:nth-of-type(?). (Aber wenn Sie sorgfältig lesen, sollten Sie "die 1., 2. und 3. Instanz von was?" Fragen). Ich habe auch ein unähnliches (dh anderes hLevel) oder ähnliches (dh dasselbe hLevel) nicht klassifiziertes Element in einige der Gruppen eingefügt.

Beachten Sie insbesondere die letzte Gruppierung von 3. Hier wird ein nicht klassifiziertes h3Element zwischen dem ersten und dem zweiten Element eingefügt h3.A. In diesem Fall wird keine 2. Farbe (dh Orange) angezeigt, und die 3. Farbe (dh Grün) wird in der 2. Instanz von angezeigt h3.A. Dies zeigt, dass das nIn h3.A:nth-of-type(n)das h3s zählt, nicht das h3.As.

Hoffe das hilft. Und danke, @BoltClock.

div {
  margin-bottom: 2em;
  border: red solid 1px;
  background-color: lightyellow;
}

h1,
h2,
h3,
h4 {
  font-size: 12pt;
  margin: 5px;
}

h1.A:nth-of-type(1),
h2.A:nth-of-type(1),
h3.A:nth-of-type(1) {
  background-color: cyan;
}

h1.A:nth-of-type(2),
h2.A:nth-of-type(2),
h3.A:nth-of-type(2) {
  background-color: orange;
}

h1.A:nth-of-type(3),
h2.A:nth-of-type(3),
h3.A:nth-of-type(3) {
  background-color: lightgreen;
}
<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>
Erweitern Sie das Snippet

— Andrew Willems
quelle
1
Haha, mein Profil ist ein bisschen frech, das gebe ich zu ... aber das ist nicht einmal das Problem mit der Antwort, die ich kommentiert habe - das Problem ist, dass der Text "einige andere Code + Container ..." vollständig verwendet wird im wahrsten Sinne des Wortes, wenn es sich offensichtlich auf andere tatsächlich dazwischenliegende Elemente bezieht, die die Übereinstimmungen von: nth-child () gestört hätten (die, wenn man es noch einmal betrachtet, alle aus einem anderen Grund falsch geschrieben sind). Aber wie Sie entdeckt haben: nth-of-type () ist ein anderes Tier ...
— BoltClock
1
— BoltClock
9

Vielleicht mit dem Selektor "~" von CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

.myclass~.myclass~.myclass {
    background: green;
}

Siehe mein Beispiel auf jsfiddle

— Netsi1964
quelle
2
Dies funktioniert nur für Geschwisterelemente und nicht für das, was das OP verlangt (unabhängig vom Markup)
— Zach Saucier,
1
Es war jedoch praktisch, einen React Jest-Komponententest zu schreiben, bei dem Pseudoselektoren nicht funktionieren. Also, danke, Netsi1964
— eon
0

Verwenden Sie CSS nth-childmit dem Präfixklassennamen

div.myclass:nth-child(1) {
  color: #000;
}

div.myclass:nth-child(2) {
  color: #FFF;
}

div.myclass:nth-child(3) {
  color: #006;
}
— Daniel Ohm
quelle
Dies funktioniert nicht und beantwortet die Frage nicht, wie bereits in anderen Kommentaren zu der anderen vorgeschlagenen Antwort angegeben :nth-child. Wenn sich zwischen den Divs Elemente befinden, wird Ihre Lösung beschädigt. Bitte löschen oder aktualisieren Sie Ihre Antwort.
— Cela
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.