web-dev-qa-db-fra.com

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

Est-il possible d'utiliser le sélecteur CSS3 :first-of-type pour sélectionner le premier élément portant un nom de classe donné? Je n'ai pas réussi mon test, alors 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>
csscss3css-selectors
206
Adam Youngers

Non, ce n'est pas possible avec 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 a la classe donnée (ou est du type donné) et est le premier de son type parmi ses frères et soeurs.

Malheureusement, CSS ne fournit pas de sélecteur :first-of-class qui ne choisit que la première occurrence d'une classe. Pour contourner le 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 .

308
BoltClock

Le brouillon CSS Selectors Level 4 propose d’ajouter une grammaire _of <other-selector>_ au sélecteur :nth-child . Cela vous permettrait de choisir le n ème enfant correspondant à un autre sélecteur:

_:nth-child(1 of p.myclass) 
_

Les brouillons précédents utilisaient une nouvelle pseudo-classe, :nth-match() , afin que vous puissiez 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 existe des tickets pour son implémentation Blink (Chrome) , Gecko (Firefox) , et un demande de le mettre en œuvre dans Edge , mais pas apparent. progrès sur aucun de ceux-ci.

42
Brian Campbell

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

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

J'ai trouvé une solution pour votre référence. à partir de divs de groupe, sélectionnez dans le groupe de deux classes identiques 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 fonctionne, mais :first-of-type ne fonctionne pas.

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

9
Konstantin

Ceci est un ancien fil de discussion, mais je réponds car il figure 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

6
TDavison

En tant que solution de secours, vous pouvez envelopper vos classes dans un élément parent comme ceci:

<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>
3
Gediminas Bivainis

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>
0
Jonathan.

Je ne sais pas comment expliquer cela, mais j'ai rencontré quelque chose de similaire aujourd'hui. Ne pouvant pas définir .user:first-of-type{} alors que .user:last-of-type{} fonctionnait correctement. Ceci a été corrigé après que je les ai enveloppés dans une div sans 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>
0
adrianTNT