Sélecteur CSS3: premier type avec nom de classe?

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