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 */
}
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 */
}
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 */
}
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 */
}
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 */
}
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.