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
Auteurs
Tantek ÇELIK
Auteurs
Elika ETEMAD
Auteurs
Daniel GLAZMAN
Auteurs
Ian HICKSON
Auteurs
Peter LINSS
Auteurs
John WILLIAMS
Editeur
W3C
Date
Chapitre
6.6.7. The negation pseud-class

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