CSS : les sélecteurs CSS2

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.
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.

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 ?
Remarquez que le texte de ce paragraphe est en rouge mais sans graisse et que la première ligne est toujours en italique.
Dans chacun des paragraphes la première ligne est une lettrine.

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 ; } img[title] {border : 10px solid green ; } img[alt] {box-shadow : 10px 10px 10px gray ; } img[alt = "censure"]{opacity :0.1 ; } p::first-letter {font-size : 200% ; font-family : sans-serif; } p::first-line {font-style : italic ; } div {border : 1px solid red ; } body > p {color : red ; } h1 + p {font-weight : bold ; }

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

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

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