Négation en CSS

Les feuilles de styles en cascade permettent beaucoup de choses, notamment avec les navigateurs web qui implémentent correctement les spécifications du W3C. Néanmoins, il est parfois difficile - mais pas impossible - d'appliquer une série de règles par la négative (appliquer les styles sauf dans certains cas précis). Les CSS de niveau 3 offriront enfin un outil pour le faire.

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

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