Sélecteurs, héritage et spécificité

Sélecteurs les plus courants

Il y a différents façons de sélectionner un élément, basées sur : le type d'élément, sa classe ou son identifiant. Dans le fichier HTML, on pourra avoir

<élément> … </élément>

<élément class="classe"> … </élément>

<élément id="identifiant"> … </élément>

Dans le fichier CSS, la manière de sélectionner tous les éléments de type élément est :

élément
{
⋯
}

La manière de sélectionner tous les éléments de classe classe est :

.classe
{
⋯
}

et la manière de sélectionner tous les éléments d'identifiant identifiant est :

#identifiant
{
⋯
}

Il est possible de combiner les sélections. Par exemple,

élément.classe
{
⋯
}

sélectionnera tous les éléments de type élément qui sont de classe classe alors que

élément#identifiant
{
⋯
}

sélectionnera tous les éléments de type élément qui ont l'identifiant identifiant.

Beaucoup d'autres combinaisons sont possibles, comme on le verra plus tard.

Héritage

À moins d'une règle qui spécifie le contraire, un élément « hérite » de la majorité des propriétés de ses éléments ancêtres (il y a des exceptions). Dans l'exemple au début du chapitre, les éléments p sont enfants d'un élément de classe page et héritent donc de sa police de caractères et de sa couleur d'arrière-plan¹.

Par contre, l'élément h1, lui aussi enfant de l'élément de classe page, a une police de caractères différente, définie dans une règle qui le concerne spécifiquement. Une règle concernant un élément descendant a toujours préséance sur les règles concernant ses éléments ancêtres.

______________________________________________________________________________

¹ Mais ils n'héritent pas des propriétés relatives au cadre : c'est un exemple de propriétés qui ne sont pas héritées.

Spécificité

Les choses se compliquent un peu quand on a différentes règles qui concernent le même type d'élément. Les conflits potentiels sont résolus en utilisant la notion de spécificité : une règle plus spécifique l'emporte sur une qui l'est moins.

Sans entrer dans des détails trop techniques, mention­nons qu'une règle où le sélecteur est l'identifiant est plus spécifique qu'une règle où le sélecteur est la classe et qu'une règle où le sélecteur est la classe est plus spé­ci­fi­que qu'une règle où le sélecteur est le type d'élément. À spécificité égale, c'est la règle qui est le plus bas dans le fichier (la dernière) qui l'emporte.

À noter aussi qu'un formatage effectué dans un fichier HTML en utilisant l'attribut style aura préséance sur un formatage effectué en tête du même fichier en utilisant l'élément style, qui aura lui-même préséance sur un formatage effectué dans un fichier CSS externe.

<!DOCTYPE html>

<html lang="fr">

<meta charset="utf-8" />
<title>Test #4</title>
<link rel="stylesheet" href="test4.css" />

<body>
<div class="page">
<h1>Ceci est un titre de page</h1>
<p id="first">Ceci est le premier paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p style="color: fuchsia">Ceci est le paragraphe trois.</p>
</div><!--page-->
</body>
</html>

Exemple

Tout d'abord, ajoutons les règles suivantes dans le fichier test3.css :

#first
{
color: red;
}

p
{
color: blue;
}

et sauvegardons le résultat comme « test4.css ». Ensuite, modifions test3.html comme dans l'encadré de droite et sauvegardons le résultat sous le nom « test4.html ». Voyons ce qui se passe quand on ouvre le fichier :

test4.thml

Accueil