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

Est-il possible d'utiliser le sélecteur CSS3 :first-of-typepour sélectionner le premier élément avec un nom de classe donné? Je n'ai pas réussi mon test, donc je pense que non?

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}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

Non, ce n'est pas possible en utilisant un seul sélecteur. La :first-of-typepseudo-classe sélectionne le premier élément de son de 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 a la classe donnée (ou est du type donné) et est le premier de son type parmi ses frères et sœurs.

Malheureusement, CSS ne fournit pas de :first-of-classsélecteur qui ne choisit que 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 de la solution de contournement sont données ici et ici .

Le projet CSS Selectors Level 4 propose d'ajouter une of <other-selector>grammaire dans le :nth-childsélecteur . Cela vous permettrait de choisir le n ème enfant correspondant à un autre sélecteur donné:

:nth-child(1 of p.myclass) 

Les versions précédentes utilisaient une nouvelle pseudo-classe, :nth-match()vous pouvez donc voir cette syntaxe dans certaines discussions sur 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 prend en charge . Il y a des tickets déposés pour l'implémenter Blink (Chrome) , Gecko (Firefox) , et une demande de l'implémenter dans Edge , mais aucun progrès apparent sur aucun d'entre eux.

Il n'est pas possible d'utiliser le sélecteur CSS3 : premier du type pour sélectionner le premier élément avec un nom de classe donné.

Cependant, si l'élément ciblé a un frère d'élément précédent, vous pouvez combiner la pseudo-classe CSS de négation et les sélecteurs de frère 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 }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

J'ai trouvé une solution pour votre référence. de certains divs de groupe choisir parmi un groupe de deux divs de même classe 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 ça :last-of-typemarche, mais :first-of-typeça ne marche pas.

Mes expériences sur jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Il s'agit d'un ancien fil de discussion, mais je réponds car il apparaît toujours en haut de 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

Comme solution de secours, vous pouvez encapsuler vos classes dans un élément parent comme celui-ci:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

Je ne sais pas comment expliquer cela, mais je suis tombé sur quelque chose de similaire aujourd'hui. Ne pas pouvoir régler .user:first-of-type{}en .user:last-of-type{}travaillant correctement. Cela a été corrigé après les avoir enveloppés dans un div sans aucune classe ni style:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

Vous pouvez le faire en sélectionnant chaque élément de la classe qui est le frère de la même classe et en l'inversant, ce qui sélectionnera à peu près tous les éléments de la page, vous devrez donc sélectionner à nouveau par la classe.

par exemple:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

Fonctionne simplement :firstpour moi, pourquoi cela n'est-il pas encore mentionné?