Comment choisir le premier, le deuxième ou le troisième élément avec un nom de classe?

utilisation nth-child(numéro d'article)
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) { };

OU

:nth-of-type(numéro d'article)
même votre code

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

Ce n'est pas tellement une réponse comme une non-réponse, c'est à dire un exemple montrant pourquoi l'un des très voté les réponses ci-dessus est en fait mal.

J'ai pensé que la réponse avait l'air bien. En fait, il m'a donné ce que je cherchais: :nth-of-type qui, pour ma situation, travaillé. (Oui, merci, @Bdwey.)

J'ai d'abord lu le commentaire de @BoltClock (qui dit que la réponse est essentiellement mauvais) et il a rejeté, j'avais vérifié mon cas d'utilisation, et cela a fonctionné. Puis j'ai réalisé @BoltClock avait une réputation de 300 000+(!) et a un profil où il prétend être un gourou CSS. Hmm, j'ai pensé que, peut-être que je devrais regarder un peu plus près.

S'avère comme suit: div.myclass:nth-of-type(2) ne signifie PAS "le 2ème exemple de div.myclass". Plutôt, cela signifie "la 2ème exemple de div, et il doit également avoir la "myclass " classe". C'est une distinction importante lorsqu'il y a intervention divs entre votre div.myclass instances.

Il m'a fallu un certain temps pour obtenir ma tête autour de cela. Ainsi, pour aider les autres à comprendre plus rapidement, j'ai écrit un exemple qui, je crois, explique le concept plus clairement que d'une description écrite: j'ai détourné le h1, h2, h3 et h4 éléments essentiellement divs. J'ai mis un A classe sur certains d'entre eux, regroupés en 3, puis colorée à la 1ère, 2ème et 3ème cas le bleu, l'orange et le vert à l'aide h?.A:nth-of-type(?). (Mais, si vous lisez attentivement, vous devriez vous demander "à la 1ère, 2ème et 3ème instances de quoi?"). J'ai également intervenu un dissemblables (c'est à dire les différents h niveau) ou similaires (à savoir les mêmes h niveau) de l'onu-classés élément dans certains de ces groupes.

Note, en particulier, le dernier regroupement de 3. Ici, une liste non-classé h3 élément est inséré entre le premier et le deuxième h3.A éléments. Dans ce cas, pas de 2ème couleur (c'est à dire orange) s'affiche, et la 3ème couleur (vert) s'affiche sur le 2ème instance de h3.A. Cela montre que la n dans h3.A:nth-of-type(n) est le comptage du h3s, pas la h3.As.

Bien, espérons que cette aide. Et merci, @BoltClock.

CSS:

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

HTML:

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