Est-il possible d’utiliser le sélecteur CSS3 :first-of-type
pour sélectionner le premier élément avec un nom de classe donné? Je n’ai pas réussi mon test, alors je pense que ce n’est pas le cas?
Le code ( http://jsfiddle.net/YWY4L/ ):
p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green}
This text should appear as normal This text should be blue.
This text should appear red.
- Préserve la taille de la police HTML lorsque l’orientation de l’iPhone change de portrait en paysage
- Que signifient les propriétés de style croisé de Google Chrome devtools?
- Comment faire pivoter un code HTML 90 degrés?
- CSS to line break avant / après un élément `inline-block` particulier
- Taille en entrée vs largeur
This text should appear green.
Non, ce n’est pas possible en utilisant un seul sélecteur. La pseudo-classe :first-of-type
sélectionne le premier élément de son type ( div
, p
, etc.). Utiliser un sélecteur de classe (ou un sélecteur de type) avec cette pseudo-classe signifie sélectionner un élément s’il possède la classe donnée (ou est du type donné) et est le premier de son type parmi ses frères.
Malheureusement, CSS ne fournit pas un sélecteur de premier niveau qui ne choisit que la première occurrence d’une classe. Pour contourner ce problème, 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ées ici et ici .
Le projet de sélecteur CSS de niveau 4 propose d’append une grammaire of
dans le sélecteur :nth-child
. Cela vous permettrait de choisir le n ième enfant correspondant à un autre sélecteur donné:
:nth-child(1 of p.myclass)
Les brouillons précédents utilisaient une nouvelle pseudo-classe, à savoir :nth-match()
, vous pouvez donc voir cette syntaxe dans certaines discussions de la fonctionnalité:
:nth-match(1 of p.myclass)
Cela a maintenant été implémenté dans WebKit et est donc disponible dans Safari, mais cela semble être le seul navigateur qui le supporte . Blink (Chrome) , Gecko (Firefox) , une demande de mise en œuvre dans Edge , mais il n’ya pas eu de progrès apparent.
J’ai trouvé une solution pour votre référence. de certains groupes div sélectionner parmi le groupe de deux même classe div le premier
p[class*="myclass"]:not(:last-of-type) {color:red} p[class*="myclass"]:last-of-type {color:green}
BTW, je ne sais pas pourquoi :last-of-type
works fonctionne, mais :first-of-type
ne fonctionne pas.
Mes expériences sur jsfiddle … https://jsfiddle.net/aspanoz/m1sg4496/
Ceci est un ancien thread, mais je réponds car il apparaît toujours haut dans la liste des résultats de recherche. Maintenant que le futur est arrivé, vous pouvez utiliser le pseudo-sélecteur nth-child.
p:nth-child(1) { color: blue; } p.myclass1:nth-child(1) { color: red; } p.myclass2:nth-child(1) { color: green; }
Le pseudo-sélecteur: nth-child est puissant – les parenthèses acceptent les formules ainsi que les nombres.
Plus ici: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Il n’est pas possible d’utiliser le sélecteur CSS3 : first-of-type pour sélectionner le premier élément avec un nom de classe donné.
Cependant, si l’élément cible a un élément précédent, vous pouvez combiner la pseudo-classe CSS négation et les sélecteurs frères adjacents pour faire correspondre un élément qui n’a pas immédiatement un élément précédent avec le même nom de classe:
:not(.myclass1) + .myclass1
Exemple de code de travail complet:
p:first-of-type {color:blue} p:not(.myclass1) + .myclass1 { color: red } p:not(.myclass2) + .myclass2 { color: green }
This text should appear as normal This text should be blue.
This text should appear red.
This text should appear green.
En tant que solution de secours, vous pouvez envelopper vos classes dans un élément parent comme ceci:
This text should appear as normal This text should be blue.
This text should appear red.
This text should appear green.
Simplement :first
fonctionne pour moi, pourquoi n’est-ce pas encore mentionné?