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

Question

Comment sélectionner un élément spécifique dans une liste d'éléments? J'ai ce qui suit:

mon texte1

    des trucs

    encore des trucs

    Bonjour le monde

mon texte2

    des trucs

    Bonjour le monde

mon texte3

    des trucs

La fin

J'ai la classe CSS div.myclass {faire des choses} qui s'applique à tous, évidemment, mais je voulais aussi pouvoir sélectionner le premier, le deuxième ou le troisième div de classe .myclass comme ceci, peu importe où ils se trouvent dans le balisage:

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

Presque comme la sélection d'index jQuery .eq( index ), que j'utilise actuellement, mais j'ai besoin d'une alternative sans script.

Plus précisément, je recherche des pseudo-sélecteurs, pas des choses comme ajouter une autre classe ou utiliser des IDs pour faire fonctionner les choses.

Answer 1

Utiliser nth-child(numéro de l'élément) EX

    mon texte 1
    quelques autres codes + conteneurs...

    mon texte 2
    quelques autres codes + conteneurs...

    mon texte 3
    quelques autres codes + conteneurs...

.parent_class:nth-child(1) { };
.parent_class:nth-child(2) { };
.parent_class:nth-child(3) { };

OU

nth-of-type(numéro de l'élément) même votre code

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

Answer 2

Vous avez probablement enfin réalisé cela entre le moment où vous avez posté cette question et aujourd'hui, mais la nature même des sélecteurs rend impossible la navigation à travers des éléments HTML sans lien hiérarchique.

Ou, pour le dire simplement, puisque vous avez dit dans votre commentaire que

il n'y a pas de conteneurs parents uniformes

... ce n'est tout simplement pas possible avec des sélecteurs seuls, sans modifier le balisage d'une manière ou d'une autre comme le montrent les autres réponses.

Vous devez utiliser la solution jQuery .eq().

Answer 3

Ce n'est pas tellement une réponse mais plutôt une non-réponse, c'est-à-dire un exemple montrant pourquoi une des réponses les plus votées ci-dessus est en fait incorrecte.

Je trouvais que cette réponse avait l'air bien. En fait, elle m'a donné ce que je cherchais : :nth-of-type qui, pour ma situation, a fonctionné. (Donc, merci pour cela, @Bdwey.)

J'ai d'abord lu le commentaire de @BoltClock (qui dit que la réponse est essentiellement fausse) et je l'ai rejeté, car j'avais vérifié mon cas d'utilisation et cela fonctionnait. Puis j'ai réalisé que @BoltClock avait une réputation de 300 000+(!) et avait un profil où il prétend être un guru du CSS. Hmm, je me suis dit, peut-être que je devrais regarder un peu plus attentivement.

Il s'avère que : div.myclass:nth-of-type(2) NE signifie pas "la 2ème instance de div.myclass". En fait, cela signifie "la 2ème instance de div, qui doit également avoir la classe 'myclass'". C'est une distinction importante lorsqu'il y a des divs intermédiaires entre vos instances div.myclass.

Cela m'a pris du temps pour bien comprendre cela. Alors, pour aider les autres à comprendre plus rapidement, j'ai écrit un exemple qui, je crois, illustre le concept plus clairement qu'une description écrite : J'ai détourné les éléments h1, h2, h3 et h4 pour être essentiellement des divs. J'ai ajouté une classe A sur certains d'entre eux, les ai regroupés par 3, et ensuite coloré en bleu, orange et vert les 1ères, 2èmes et 3èmes instances en utilisant h?.A:nth-of-type(?). (Mais, si vous lisez attentivement, vous devriez vous demander "la 1ère, 2ème et 3ème instance de quoi ?"). J'ai également intercalé un élément non similaire (c'est-à-dire d'un niveau de h différent) ou similaire (c'est-à-dire du même niveau de h) non classé dans certains groupes.

Remarquez, en particulier, le dernier regroupement de 3. Ici, un élément h3 non classé est inséré entre la première et la deuxième instance de h3.A. Dans ce cas, aucune 2ème couleur (c'est-à-dire orange) n'apparaît, et la 3ème couleur (c'est-à-dire verte) apparaît sur la 2ème instance de h3.A. Cela montre que le n dans h3.A:nth-of-type(n) compte les h3s, pas les h3.As.

Eh bien, j'espère que cela aide. Et merci, @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;
}

  h1.A #1
  h1.A #2
  h1.A #3

  h2.A #1
  cet élément intermédiaire est d'un type différent, c'est-à-dire h4 pas h2
  h2.A #2
  h2.A #3

  h3.A #1
  cet élément intermédiaire est du même type, c'est-à-dire h3, mais n'a pas de classe
  h3.A #2
  h3.A #3

Answer 4

Oui, vous pouvez le faire. Par exemple, pour styliser les balises td qui composent les différentes colonnes d'une table, vous pourriez faire quelque chose comme ceci:

table.myClass tr > td:first-child /* Première colonne */
{
  /* du style ici */
}
table.myClass tr > td:first-child+td /* Deuxième colonne */
{
  /* du style ici */
}
table.myClass tr > td:first-child+td+td /* Troisième colonne */
{
  /* du style ici */
}

Answer 5

Peut-être en utilisant le sélecteur "~" de CSS ?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

Consultez mon exemple sur jsfiddle