CSS sélectionner le premier élément avec une certaine classe

Question

Quelle est la syntaxe pour sélectionner le premier élément avec une certaine classe? Veuillez préciser si cette méthode de sélection fait partie de CSS3 ou CSS2.1.

Answer 1

Essayez cette

.testparent .test:first-child { 
    color: red; 
} 

<div class="testparent"> 
<div class="test">test</div> 
<div class="test">test</div> 
<div class="test">test</div> 
</div> 

la première div 'test' a la couleur rouge seulement.

Answer 2

Si vous avez besoin du premier élément avec une certaine classe parmi ses frères et sœurs, vous pouvez utiliser

.myclass { 
    /* styles of the first one */ 
} 

.myclass ~ .myclass { 
    /* styles of the others (must cancel the styles of the first rule) */ 
} 

Ne pas essayer d'utiliser .myclass:not(.myclass ~ .myclass) de le faire en une seule règle, il ne fonctionnera pas puisque :not() n'accepte que les sélecteurs simples entre parenthèses.

Si vous voulez le premier .myclass dans le document entier, il n'y a aucun moyen de le faire avec CSS seul.

Les approches :nth-of-type() ou :nth-child() affichées sont erronées, même si elles correspondent par hasard aux éléments que vous voulez dans votre page.

Support navigateur du sélecteur de frères et sœurs (~): IE7 + et tous les autres.

Answer 3

.class-name:first-of-type { 
    ⋮ declarations 
}