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

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.

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.

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) { };

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 */
}

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>

Vielleicht mit dem Selektor "~" von CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

Siehe mein Beispiel auf jsfiddle

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;
}

In Zukunft können Sie (vielleicht) verwenden :nth-child(an+b of s)

Tatsächlich ist die Browserunterstützung für den Filter "of" sehr begrenzt. Nur Safari scheint die Syntax zu unterstützen.

https://css-tricks.com/almanac/selectors/n/nth-child/