Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

Sélecteur :NOT

Rôle

Le sélecteur not est une pseudo-classe désigné par la syntaxe :not(selector) qui permet de cibler chaque élément n’étant pas celui qui est ciblé par le paramètre sélecteur.

Note: pour que le sélecteur :not(selector) fonctionne, c’est à dire pour cibler celui ou ceux qui ne sont pas la cible d’un sélecteur , il faut d’abord spécifier une feuille de style pour ce sélecteur.

Le paramètre sélecteur peut être :

– une balise simple [:not(p)]

p {
    color: green;
}
/* les élements qui ne sont pas paragraphe */
:not(p) {
    color: green;
}

– une class [:not(.bg)]

.bg {
    color: red;
}
/* les élements qui ne sont pas ciblés par le selecteur de class .bg */
:not(.bg) {
    color: green;
}

– une pseudo-classe [:not(:hover)]]

:hover{
  color: red;
}
/* les élements qui ne sont pas survolés */
:not(hover) {
    color: green;
}

Mais il ne peut pas être un selecteur ID, un sélecteur composé (descendant, enfant, contextuel). Il n’est pas possible aussi d’imbriquer les ‘not:’

Dans l’exemple ci-dessous, on spécifie que les éléments avec la classe ‘.toto’ doivent être rouges et que ceux qui n’ont pas la classe ‘.toto’ devront être verts.

.toto{
  color: red;
}
:not(.toto) {
    color: green;
}
<h1 class="toto">titre</h1>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Version : CSS3

Testez vous-même ce sélecteur

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur not est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.

A voir aussi

:root 
:empty 
:target 
:lang(langage)

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »