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

A l'avenir (peut-être) vous pourrez utiliser :nth-child(an+b de s)

Dans votre cas ce serait :nth-child(-n+3 de .myclass)

En fait, le support du navigateur pour le filtre "of" est très limité. Seul Safari semble supporter la syntaxe.

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

Answer 2

Pour atteindre ce que vous voulez ici, vous devez ajouter une classe ou un ID unique à cet/cet(te)(s) élément(s) que vous souhaitez cibler.

Answer 3

mon texte1
autre code+conteneurs...
mon texte2
autre code+conteneurs...
mon texte3

div.myclass#one {color:#000;} 
div.myclass#two {color:#FFF;} 
div.myclass#three {color:#006;}

Je crois que c'est ce que vous voulez dire?

Ou vous pourriez assigner

div.myclass {
color: #000;
}

.one {
background-color: blue;
}
etc

et ensuite dans le html vous utiliseriez deux classes séparées par un espace.

mon texte1