DEUXIÈME PARTIE
46
Les sélecteurs de styles
L’exemple donné ci-dessus utilise comme sélecteurs les balises
et . Ses règles
affecteront donc toutes ces balises dans les pages HTML concernées. Cet effet n’est pas
toujours désirable : on souhaite parfois n’intervenir que sur certaines balises d’un type
donné (par exemple, en colorant en rouge certains liens hypertextes mais pas tous).
Pour cela, le langage CSS accepte différentes formes de sélecteurs :
• les sélecteurs de balises (utilisés jusqu’ici) ;
• les sélecteurs de classes (une classe est un nom donné à un ensemble d’éléments
HTML à distinguer) ;
• les sélecteurs d’identifiants (un identifiant ou id est le nom attribué à un élément
unique dans le document HTML) ;
• les pseudo-classes et les pseudo-éléments (variantes pour certaines fonctionnalités, par exemple les liens).
Les balises
Toute balise HTML peut intervenir dans un sélecteur. Ainsi, on pourra supprimer
tous les interlignes entre paragraphes en attribuant à la balise des marges haute et
basse nulles :
Les classes
Une classe est un nom que l’on choisit librement (en se limitant aux caractères alphanumériques classiques) et dont on baptise les éléments concernés. Un sélecteur de classe
reprend son nom en le préfixant d’un point (par exemple : .ma_classe, .toto, etc.).
Pour attribuer un comportement différent à certains éléments, il suffit de leur appliquer une classe. On affichera en vert les liens hypertextes du document à l’exception
de certains liens particuliers que l’on souhaite voir apparaître en rouge en reprenant la
technique suivante.
Une première règle précise le comportement par défaut à adopter pour toutes les
balises :
p {
margin-top: 0;
margin-bottom: 0;
}
a {
color: green;
}
basse nulles :
Les classes
Une classe est un nom que l’on choisit librement (en se limitant aux caractères alphanumériques classiques) et dont on baptise les éléments concernés. Un sélecteur de classe
reprend son nom en le préfixant d’un point (par exemple : .ma_classe, .toto, etc.).
Pour attribuer un comportement différent à certains éléments, il suffit de leur appliquer une classe. On affichera en vert les liens hypertextes du document à l’exception
de certains liens particuliers que l’on souhaite voir apparaître en rouge en reprenant la
technique suivante.
Une première règle précise le comportement par défaut à adopter pour toutes les
balises :
p {
margin-top: 0;
margin-bottom: 0;
}
a {
color: green;
}