Jak wybrać pierwszy, drugi lub trzeci element o podanej nazwie klasy?

Użyj NTH-child(numer pozycji) 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) { };

Lub

: nth-of-type(numer pozycji) ten sam Twój kod

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };

Tak, możesz to zrobić. Na przykład, aby stylizować znaczniki td składające się na różne kolumny tabeli, możesz zrobić coś takiego:

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

To nie tyle odpowiedź, co Brak odpowiedzi, czyli przykład pokazujący, dlaczego jedna z wysoko głosowanych odpowiedzi powyżej jest w rzeczywistości błędna.

Myślałem, że ta odpowiedź wygląda dobrze. W rzeczywistości dało mi to, czego szukałem: :nth-of-type co, jak na moją sytuację, zadziałało. (Tak, dzięki za to, @ Bdvey.)

Początkowo przeczytałem komentarz @BoltClock (który mówi, że odpowiedź jest zasadniczo błędna) i odrzuciłem go, ponieważ sprawdziłem mój przypadek użycia i zadziałało. Wtedy zdałem sobie sprawę, @BoltClock miał reputację 300.000+(!) i ma profil, w którym twierdzi, że jest guru CSS. Pomyślałem, że może powinienem przyjrzeć się bliżej.

Okazuje się, że: div.myclass:nth-of-type(2) nie oznacza " drugiej instancji div.myclass". Oznacza raczej "2. instancję div I musi mieć również klasę' myclass'". To ważne rozróżnienie, gdy pomiędzy twoimi instancjami są interwencje div.

Uwaga, w szczególności, ostatnia grupa 3. W tym przypadku element h3 jest wstawiany pomiędzy pierwszy i drugi h3.A. W tym przypadku nie pojawia się drugi kolor (tj. pomarańczowy), a trzeci kolor (tj. zielony) pojawia się na drugim wystąpieniu h3.A. To pokazuje, że n w h3.A:nth-of-type(n) liczy h3s, a nie h3.As.

Cóż, mam nadzieję, że pomaga. I dzięki, @ 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>

Być może używając selektora " ~ " CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

Zobacz mój przykład na jsfiddle