Les pseudo-éléments et le sélecteur de négation

les pseudo-éléments

Avec CSS3 faut désormais distinguer les pseudo-éléments des pseudo-classes

Non vous ne voyez pas double ... Il faut bien insérer deux fois le double point.

Maintenant rassurez vous les navigateurs tolèrent toujours l'ancienne syntaxe (un seul double point) et j'avoue qu'il m'arrive encore souvent de ne mettre qu'un seul double point.

Je rappelle que le pseudo-élément ::before est à la base de la numérotation automatique des titres (balises H1 à H6) qu'il est désormais possible de réaliser avec CSS. Voir dans le même tuto la page sur la "numérotation automatique des titres".

le sélecteur de négation

La pseudo-classe de négation est une nouveauté CSS3 qui devrait s'avérer très utile car elle devrait simplifier considérablement les feuilles de style.

Dans cette page tout le texte est en rouge sur fond jaune sauf le texte des balises P.
La raison est très simple. Dans la feuille de style nous avons la règle suivante :
body *:not(p) {color : red ; background : yellow;}. Ici le sélecteur permet de cibler toutes les descendants de BODY sauf les balises P. Donc toutes les balises (sauf P) auront un fond jaune et un texte en rouge !

la feuille de style de la page

p::first-letter {font-size :200% ; font-family :cursive ;} p::first-line {font-variant : small-caps ; } h1::before {content : "Titre principal : " ; } h2::before {content : "Sous-titre : " ; } body *:not(p) {color : red ; background : yellow ;} h1,h2 {font-size : 24px ; text-align : center ; height : 40px ; line-height : 40px ; } a {width : 100px ; }

commentaire du CSS

La première lettre de chaque paragraphe est une lettrine.
La première ligne de chaque paragraphe est en petites majuscules.
Chaque balise H2 est précédée de la chaîne "Sous-titre : "

Mais la grande nouveauté dans cette page reste le sélecteur de négation. L'argument entre () peut être une classe. Ainsi vous pouvez écrire img:not(.miniature) {box-shadow : ...) : toutes les images sont ombrées sauf celles affectées de la classe miniature.
Retour menu