Support de cours - Lita

1.3 Quelques sélecteurs
On l’a vu, afin de changer les propriétés des éléments d’un document Html, il est
nécessaire d’indiquer les éléments Html concernés. C’est le rôle des sélecteurs.
Sélecteurs simples La façon la plus simple d’indiquer un élément Html du document
sur lequel appliquer des règles Css est d’indiquer le nom de la balise délimitant
cet élément. Par exemple pour appliquer un style aux titres délimités par h1 dans le
document Html, il suffit d’écrire dans le document Css :
h1 {
}
font-weight: bold;
font-variant: small-caps;
font-family: sans-serif;
Ici les titres h1 seront en gras (bold), en petite capitales (small-caps) et dans une famille
de caractères sans empattements (sans-serif).
Suite de sélecteurs Il est possible d’appliquer un ensemble de déclarations à plusieurs
éléments en séparant les noms par des virgules. Par exemple, si l’on souhaite que tous
les titres de h1 à h3 soient concernés par l’ensemble des déclarations précédentes, il suffit
d’écrire :
h1, h2, h3 {
}
font-weight: bold;
font-variant: small-caps;
font-family: sans-serif;
Cela évite de dupliquer inutilement du code, et facilite la modification simultanée des
éléments concernés.
Sélecteur universel Il existe un sélecteur spécial permettant de sélectionner tous les
éléments d’un document Html : * . Par exemple, si l’on souhaite que le texte de tous
les éléments Html soit en rouge sur fond noir :
* {
}
background-color: black;
color: red;
En pratique ce sélecteur est peu utilisé tel quel, mais en combinaison avec d’autres
sélecteurs (p. ex. de classe).
Sélecteurs de classe Nous souhaitons définir des propriétés pour certains éléments
importants. Mais nous ne disposons pas a priori de marquage en Html le permettant
puisqu’il peut s’agir de certains paragraphes, de quelques titres, etc. : il n’existe en effet
pas de balise en Html.
Cependant, chaque balise Html peut se voir associer un attribut class avec une
valeur libre définissant une classe à laquelle appartient l’élément :
21