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 du formatage de ses éléments ancêtres. Dans l'exemple de la section précédente, les éléments p sont enfants de l'élément page et héritent donc de sa police.

Ce n'est pas le cas de l'élément h1, pourtant lui aussi enfant de l'élément page, car une règle touche l'élément h1. Une règle concernant un élément descendant a toujours préséance sur les règles concernant ses éléments ancêtres.

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