web-dev-qa-db-fra.com

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

Comment puis-je sélectionner un élément donné dans une liste d'éléments? J'ai le suivant:

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

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

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

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

Pour être précis, je recherche des pseudo-sélecteurs, et non des choses comme l’ajout d’une autre classe ou l’utilisation d’ID pour faire fonctionner les choses.

csscss-selectorspseudo-class
68
Tumharyyaaden

Vous avez probablement finalement compris cela entre la publication de cette question et celle d'aujourd'hui, mais la nature même des sélecteurs rend impossible la navigation dans des éléments HTML hiérarchiquement non liés.

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

il n'y a pas de contenants parent uniformes

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

Vous avez utilisez la solution jQuery .eq() _.

30
BoltClock

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

OR

: nième de type (numéro d'article) même votre code

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

Oui, tu peux faire ça. Par exemple, pour styliser les balises td qui composent les différentes colonnes d’un tableau, vous pouvez faire quelque chose comme ceci:

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

Ce n’est pas tant une réponse qu’une non-réponse, c’est-à-dire un exemple montrant pourquoi ne des réponses très votées ci-dessus est en fait faux.

Je pensais que cette réponse avait l'air bien. En fait, cela m'a donné ce que je cherchais: :nth-of-type qui, dans ma situation, a fonctionné. (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 a fonctionné. Ensuite, j'ai réalisé que @BoltClock avait une réputation de plus de 300 000 (!) Et avait un profil où il prétend être un gourou des CSS. Hmm, j'ai pensé, peut-être que je devrais regarder un peu plus près.

Il se présente comme suit: div.myclass:nth-of-type(2) ne signifie PAS "la deuxième instance de div.myclass". Cela signifie plutôt "la 2ème instance de div, et il doit également avoir la classe 'myclass'". C'est une distinction importante lorsqu'il y a des div intermédiaires entre vos instances div.myclass.

Il m'a fallu du temps pour comprendre cela. Donc, pour aider les autres à comprendre plus rapidement, j’ai écrit un exemple qui, je crois, montre le concept plus clairement qu’une description écrite: j’ai détourné les éléments h1, h2, h3 et h4 pour qu'ils soient div s. J'ai mis une classe A sur certaines d'entre elles, je les ai regroupées par 3, puis j'ai coloré les 1ère, 2ème et 3ème occurrences en bleu, orange et vert en utilisant h?.A:nth-of-type(?). (Mais si vous lisez attentivement, vous devriez demander "les 1re, 2e et 3e instances de quoi?"). J'ai également inséré un élément non classé (c'est-à-dire différent h) ou similaire (c'est-à-dire le même niveau h) dans certains groupes.

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

Eh bien, espérons 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;
}
<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>
11
Andrew Willems

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

Voir mon exemple sur jsfiddle

8
Netsi1964