Le sélecteur :not css est un sélecteur incroyablement puissant que tout développeur Web devrait connaître ????.
De nombreux développeurs Web ne connaissent pas ce sélecteur et ne l'utilisent pas car ils ne comprennent pas sa puissance.
Ce guide va changer tout cela. Dans ce guide, je vais partager avec vous tout ce que vous devez savoir pour commencer à utiliser le sélecteur :not css... tout de suite !
Vous apprendrez à utiliser le sélecteur :not css avec 4 exemples différents , ce qui signifie que vous pourrez commencer à l'utiliser immédiatement dans votre prochain projet.
Tout ce dont vous avez besoin est de lire ce guide sans sauter aucune étape.
Il y a tellement de cas d'utilisation où le sélecteur :not css peut être utile.
Que faire si vous souhaitez ajouter une marge supérieure à tous les éléments sauf le premier enfant ? Ou souhaitez-vous ignorer un élément ou une classe spécifique pour le style ?
Qu'est-ce que le sélecteur :not() en CSS ?
Sa formule est très simple et directe. Considérez :not css comme except ou skip .
Lorsque vous souhaitez appliquer les styles à tous les éléments en ignorant la classe ou l'élément spécifique, alors le sélecteur :not css est la solution.
Examinons plusieurs exemples ou cas d'utilisation, afin que vous puissiez comprendre la puissance réelle du sélecteur :not css.
:pas de sélecteur CSS avec une autre classe pseduo
Ajoutez la marge supérieure à tous les éléments de la liste sauf le premier enfant. C'est un cas très courant, et nous l'utilisons de temps en temps.
Ainsi, nous avons des éléments de liste où ul a une liste de noms de classe, et les éléments li se voient attribuer un élément de liste de classe commun.
Nous avons sélectionné la classe list-item et ajouté :not selector .
Après cela, utilisez le :first-child , qui est également un autre sélecteur, pour sélectionner le premier enfant dans la liste des éléments.
Maintenant, notre commande ressemble à .list-item:not(:first-child) , ce qui signifie appliquer les styles à tous les éléments de liste sauf le premier enfant.
Vous trouverez ci-dessous un exemple fonctionnel avec sortie :
<h2 class="heading">Example #1</h2>
<ul class="list">
<li class="list-item">PHP</li>
<li class="list-item">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul>
.list-item:not(:premier-enfant){
margin-top:1rem;
background-color: #ff5852;
}
css pas de sélecteur avec la classe ou l'identifiant
Ajoutez la couleur d'arrière-plan à tous les éléments de la liste, à l'exception de la classe .active.
Nous avons le même cas que dans le premier exemple. La seule différence est qu'au lieu d'utiliser le premier enfant, nous ciblerons la classe qui contient un élément de liste, à savoir la classe .active .
Notre commande ressemble à .list-item:not(.active) , ce qui signifie appliquer les styles à tous les éléments de liste, à l'exception de l' élément de liste avec une autre classe qui est .active .
Juste une petite note ici, vous pouvez également utiliser l'identifiant, .list-item:not(#active) . Pour que cela fonctionne, vous devrez mettre un identifiant actif sur l'élément de l'élément de liste.
<h2 class="heading">Example #2</h2>
<ul class="list">
<li class="list-item">PHP</li>
<li class="list-item active">CSS</li>
<li class="list-item">HTML</li>
<li class="list-item">JS</li>
</ul>
.list-item:not(.active){ background-color: #ff5852; }
Conseil:
:not css selector peut être utilisé pour un élément spécifique, un élément enfant spécifique, un attribut spécifique, un nom de classe spécifique à l'intérieur de l'élément, etc.
sélecteur css not() avec l'attribut
Appliquez la couleur d'arrière-plan à tous les éléments de la liste sauf celui avec l'attribut attr=php .
Nous venons donc d'ajouter attr à des fins de démonstration, vous pouvez ajouter ou sélectionner n'importe quel type d'attribut, et oui, attr n'est qu'un nom aléatoire.
Notre commande ressemble à .list-item:not(), ce qui signifie appliquer les styles à tous les éléments de liste à l'exception de l'élément de liste avec une valeur d'attribut définie sur php.
Vous trouverez ci-dessous un exemple fonctionnel avec sortie :
<h2 class="heading">Example #3</h2>
<ul class="list">
<li class="list-item" attr="php">PHP</li>
<li class="list-item" attr="css">CSS</li>
<li class="list-item" attr="html">HTML</li>
<li class="list-item" attr="js">JS</li>
</ul>
.list-item:not([attr=php]){
background-color: #ff5852;
}
:pas de sélecteur CSS avec l'élément enfant
Appliquer la couleur d'arrière-plan à tous les enfants internes (balise d'ancrage) des éléments de liste, à l'exception de celui avec la classe .active
Notre commande ressemble à .list-item:not(.active) a , ce qui signifie appliquer les styles à toutes les ancres (a) des éléments de liste à l'exception de celle qui a la classe .active.
Vous trouverez ci-dessous un exemple fonctionnel avec sortie :
<h2 class="heading">Example #4</h2>
<ul class="liste">
<li class="list-item"><a href="">PHP</a></li>
<li class="list-item active"><a href="">CSS</a></li>
<li class="list-item"><a href="">HTML</a></li>
<li class="list-item"><a href="">JS</a></li>
</ul>
.list-item:not(.active) a{
background-color: #ff5852;
}
J'espère que vous avez trouvé cet article utile et qu'il vous a donné un autre ensemble de compétences à ajouter à votre arsenal de codage !
Si vous souhaitez en savoir plus sur les trucs et astuces CSS, nous vous encourageons à vous inscrire à notre newsletter .
Nous sommes toujours heureux d'entendre vos commentaires, alors n'hésitez pas à nous le faire savoir en les partageant avec d'autres.
En tant que développeur Web, vous aimerez certainement également ce guide : Conseils rapides pour créer votre propre site Web en tant que développeur Web.
Voici un guide complet de la grille CSS
