CSS : les sélecteurs CSS2

Oui cette page est très moche ! Mais l'objectif est ailleurs : présenter des sélecteurs mal connus.
Remarquez 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)

<body> ... <p>Avant d'aborder les nouveaux sélecteurs introduits par la version 3 de CSS il peut être utile de rappeler certains sélecteurs peu connus de la version 2. <br>Remarquez que le texte de ce paragraphe est en gras et en rouge et que le texte de la première ligne est en italique. ... <p>Vous connaissez tous le sélecteur hiérarchique (<b>ul li</b> par exemple), le sélecteur de classe (<b>.important</b> par exemple), <div> <h2>Des images</h2> <img src ="../images/toucan.jpg" title ="toucan" width ="300" /> <img src ="../images/tortue.jpg" alt ="tortue" width ="300"/> <img src ="../images/bikini.jpg" alt ="censure" width ="50%"/> <p>La première image est bordurée de vert. <br>La deuxième image est ombrée. <br>La troisième image est ombrée et transparante. <br>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. ... </div> ...

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

p {text-align: justify ; color : gray ; margin :5px ; } p:first-letter {font-size : 200% ; } p:first-line {font-style : italic ; } body > p {color : olive ; } h1 + p {font-weight : bold ; } img[title] {border : 10px solid green ; } img[alt] {box-shadow : 10px 10px 10px gray ; } img[alt = censure]{opacity :0.1 ; } div {border : 1px solid red ; }

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

Si,par exemple, vous voulez que tous les éléments d'une liste soient bordurés sauf le premier item il suffit d'écrire :

li+li {border : 1px solid red ; }

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