HTML & CSS : des sélecteurs peu connus

Une règle de style commence toujours par un sélecteur précisant les éléments de la page qui seront concernés par cette règle de style.
Oui je l'admet cett page est très moche mais l'objectif est ailleurs : présenter des sélecteurs mal connus.
Notez que le texte de ce paragraphe est en gras et en "olive" et que le texte de la première ligne est en italique.

Vous connaissez tous le sélecteur hiérarchique (ul li par exemple), le sélecteur de classe (.important par exemple), le sélecteur d'identifiant (#corps par exemple) mais il y a des sélecteurs moins connus.
Connaissez vous le sélecteur d'attribut, le sélecteur d'enfant, le sélecteur adjacent, le sélecteur de première lettre, le sélecteur de première ligne ?

Des images

tortue censure

La première image est bordurée de vert.
La deuxième image est ombrée.
La troisième image est ombrée et transparante.
Le texte de ce paragraphe n'est pas en rouge mais en gris. La première ligne est toujours en italique et la première lettre est toujours une lettrine.

Le code de la page

Code HTML (extrait)

Il y a donc des éléments P qui sont "enfants" de BODY (descendants directs)
et d'autres éléments P qui sont contenus dans la boîte DIV et qui ne sont donc pas descendants directs de BODY.

Le code CSS de cette page

Astuce : le sélecteur adjacent peut être très pratique

Dans la liste ci-dessus le texte des items est en vert sauf le premier.
La feuille de style de la page comprend la règle suivante :

	li+li {color : green ; }

Le texte des items est donc en vert à partir du deuxième item (un LI suivant un LI). <

La version 3 de CSS introduit de nouveaux sélecteurs en particulier pour les tableaux et les formulaires.
Retour menu