Négation en CSS § Omacronides

Imaginons un exemple concret : un document possède de nombreux liens marqués par une classe .external, qui spécifie par exemple que les dits liens dirigent vers une ressource extérieur au site. Si vous souhaitez appliquer des styles de présentation à ces liens, rien de plus simple :

a.external {
    /* règles de style */
}

1. Application de styles aux liens portant la classe external

Si vous souhaitez appliquer ces règles de styles uniquement aux liens qui sont inclus dans un conteneur portant l'identifiant content, vous utiliserez la sélection de descendant :

#content a.external {
    /* règles de style */    
}

2. Application de styles aux liens portant la classe external uniquement dans le conteneur content.

Mais si nous voulons maintenant appliquer les styles sur tous les liens sauf sur ceux contenus dans l'élément portant l'identifiant content, là nous n'avons plus de syntaxe CSS dédiée. Il nous faut dés lors appliquer les règles à tous les liens puis supprimer ces règles aux liens présents dans le conteneur :

/* Appliquer les règles de styles à tous les liens */
a.external {
    /* règles de style */
}
/* Ne pas appliquer les règles aux liens dans content */
#content a.external {
    /* supprimer les règles de style */
}

3. Application de styles aux liens portant la classe external sauf ceux contenus dans l'élément content.

Ce dont nous avons besoin ici, c'est d'une syntaxe qui permette d'exprimer la négation. Celle-ci est représentée dans de nombreux langages de programmation (java, php, javascript, ...) par le signe de ponctuation « ! ». On pourrait donc imaginer une syntaxe CSS de la sorte :

/* syntaxe théorique */
!#content a.external {
    /* règles de styles */
}

4. Application de styles aux liens portant la classe external sauf ceux qui sont descendants de l'élément content.

En CSS 3, nous aurons à disposition une pseudo-classe « négation » qui pourrait éventuellement faire l'affaire. Cette pseudo-classe prend en argument un sélecteur simple (sélecteur universel, de type, d'attribut, de classe, d'identifiant ou pseudo-classe) ; la présentation que l'on souhaite obtenir pourra donc être décrite comme suit :

/* Syntaxe CSS 3 */
*:not([id=content]) a.external {
    /* règles de styles */
}

5. Syntaxe CSS 3 pour spécifier la négation.

La pseudo-classe de négation est déjà partiellement implémentée dans Firefox 2.* et Safari.

Référence :

Titre: Selectors Level 3
Chapitre: 6.6.7. The negation pseud-class
Auteurs: Çelik TANTEK
Auteurs: Etemad ELIKA
Auteurs: Glazman DANIEL
Auteurs: Hickson IAN
Auteurs: Linss PETER
Auteurs: Williams JOHN
Editeur: W3C
Date: 14 décembre 2009

Cette note a été écrite en décembre 2007.