CSS3 sélecteur : first-of-type avec le nom de la classe ?

Question

Est-il possible d’utiliser le sélecteur de CSS3 : first-of-type pour sélectionner le premier élément avec un nom de classe donnée ? Je n’ai pas réussi avec mon test donc je pense ce n’est pas ?

Le CSS...

Le code HTML...

Mes expériences sur jsfiddle... http://jsfiddle.net/YWY4L/

Answer 1

Non, l' :first-of-type de la pseudo-classe sélectionne le premier élément de son type (div, p, etc). À l'aide d'un sélecteur de classe (ou d'un sélecteur de type d') avec la pseudo-classe des moyens pour sélectionner un élément si il a la classe donnée (ou d'un type donné) et est le premier de son type parmi ses frères et sœurs.

Malheureusement, le CSS n'est pas un :first-of-class sélecteur qui ne fait que choisir la première occurrence d'une classe. Comme solution de contournement, vous pouvez utiliser quelque chose comme ceci:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Des explications et des illustrations pour la solution de contournement sont donnés ici et ici.

Answer 2

Le projet de Sélecteurs CSS Niveau 4 propose une nouvelle pseudo-classe :nth-match(), ce qui permet de faire correspondre le n-ième élément qui correspond à n'importe quel sélecteur de donnée:

:nth-match(1 of p.myclass)

De cette écriture, je ne crois pas que cela soit mis en œuvre dans tous les navigateurs. Chrome a une question déposée à la mettre en œuvre, de sorte qu'il ressemble, il peut arriver à un certain point, mais il n'en est pas encore là.