033.2 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
033 Styliser le contenu avec CSS |
Objectif : |
033.2 Sélecteurs CSS et application de style |
Leçon : |
1 sur 1 |
Introduction
Lorsque nous écrivons une règle CSS, nous devons indiquer au navigateur à quels éléments la règle s’applique. Pour ce faire, nous spécifions un sélecteur : un motif qui peut correspondre à un élément ou à un groupe d’éléments. Les sélecteurs se présentent sous de nombreuses formes différentes, qui peuvent être basées sur le nom de l’élément, ses attributs, son emplacement relatif dans la structure du document, ou une combinaison de ces caractéristiques.
Styles pour toute la page
L’un des avantages de l’utilisation de CSS est que vous n’avez pas besoin d’écrire des règles individuelles pour les éléments partageant le même style. Un astérisque applique la règle à tous les éléments de la page web, comme le montre l’exemple suivant :
* {
color: purple;
font-size: large;
}
Le sélecteur *
n’est pas la seule méthode permettant d’appliquer une règle de style à tous les éléments de la page. Un sélecteur qui correspond simplement à un élément par son nom de balise s’appelle un sélecteur de type. Ainsi, tous les noms de balises HTML tels que body
, p
, table
, em
, etc. peuvent être utilisés comme sélecteurs. En CSS, le style du parent est hérité par ses éléments enfants. Ainsi, en pratique, l’utilisation du sélecteur *
a le même effet que l’application d’une règle à l’élément body
:
body {
color: purple;
font-size: large;
}
De plus, la structure en cascade de CSS vous permet d’affiner les propriétés héritées d’un élément. Vous pouvez écrire une règle CSS générale qui s’applique à tous les éléments de la page, puis écrire des règles pour des éléments ou des ensembles d’éléments spécifiques.
Si le même élément correspond à deux ou plusieurs règles contradictoires, le navigateur applique la règle du sélecteur le plus spécifique. Prenons l’exemple des règles CSS suivantes :
body {
color: purple;
font-size: large;
}
li {
font-size: small;
}
Le navigateur appliquera les styles color: purple
et font-size: large
à tous les éléments contenus dans l’élément body
. Toutefois, si la page contient des éléments li
, le navigateur remplacera le style font-size: large
par le style font-size: small
, car le sélecteur li
a une relation plus forte avec l’élément li
que le sélecteur body
.
CSS ne limite pas le nombre de sélecteurs équivalents dans une même feuille de style. Vous pouvez donc avoir deux règles ou plus utilisant le même sélecteur :
li {
font-size: small;
}
li {
font-size: x-small;
}
Dans ce cas, les deux règles sont également spécifiques à l’élément li
. Le navigateur ne peut pas appliquer des règles contradictoires, il choisira donc la règle qui vient en dernier dans le fichier CSS. Pour éviter toute confusion, il est recommandé de regrouper toutes les propriétés qui utilisent le même sélecteur.
L’ordre dans lequel les règles apparaissent dans la feuille de style affecte la manière dont elles sont appliquées dans le document, mais vous pouvez outrepasser ce comportement en utilisant une règle important
. Si, pour une raison quelconque, vous souhaitez conserver les deux règles li
distinctes, mais forcer l’application de la première au lieu de la seconde, marquez la première règle comme importante :
li {
font-size: small !important;
}
li {
font-size: x-small;
}
Les règles marquées avec !important
doivent être utilisées avec précaution, car elles brisent la cascade naturelle de la feuille de style et rendent plus difficile la recherche et la correction des problèmes dans le fichier CSS.
Sélecteurs restrictifs
Nous avons vu que nous pouvons modifier certaines propriétés héritées en utilisant des sélecteurs correspondant à des balises spécifiques. Cependant, nous devons généralement utiliser des styles distincts pour les éléments du même type.
Les attributs des balises HTML peuvent être incorporés dans des sélecteurs pour restreindre l’ensemble des éléments auxquels ils font référence. Supposons que la page HTML sur laquelle vous travaillez comporte deux types de listes non ordonnées (<ul>
) : l’une est utilisée en haut de la page comme menu des sections du site et l’autre est utilisée pour les listes classiques dans le corps du texte :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
<div id="content">
<p>The three rocky planets of the solar system are:</p>
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ul>
<p>The outer giant planets made most of gas are:</p>
<ul>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div><!-- #content -->
<div id="footer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
</body>
</html>
Par défaut, chaque élément de liste comporte un cercle noir à sa gauche. Vous pouvez vouloir supprimer les cercles de la liste du menu supérieur tout en laissant les cercles dans l’autre liste. Cependant, vous ne pouvez pas simplement utiliser le sélecteur li
car cela supprimerait également les cercles de la liste située dans le corps du texte. Vous devez trouver un moyen d’indiquer au navigateur de ne modifier que les éléments de liste utilisés dans une liste, mais pas dans l’autre.
Il existe plusieurs façons d’écrire des sélecteurs correspondant à des éléments spécifiques de la page. Comme nous l’avons mentionné précédemment, nous allons d’abord voir comment utiliser les attributs des éléments pour le faire. Pour cet exemple en particulier, nous pouvons utiliser l’attribut id
pour spécifier la liste supérieure uniquement.
L’attribut id
attribue un identifiant unique à l’élément correspondant, que nous pouvons utiliser comme sélecteur dans la règle CSS. Avant d’écrire la règle CSS, modifiez le fichier HTML d’exemple et ajoutez id="topmenu"
à l’élément ul
utilisé pour le menu supérieur :
<ul id="topmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
</ul>
Il existe déjà un élément link
dans la section head
du document HTML qui pointe vers le fichier de feuille de style style.css
dans le même dossier, nous pouvons donc y ajouter les règles CSS suivantes :
ul#topmenu {
list-style-type: none
}
Le caractère dièse est utilisé dans un sélecteur, à la suite d’un élément, pour désigner un identifiant (sans espace les séparant). Le nom de la balise à gauche du caractère dièse est facultatif, car il n’y aura pas d’autre élément avec le même identifiant. Par conséquent, le sélecteur pourrait être écrit simplement comme #topmenu
.
Même si la propriété list-style-type
n’est pas une propriété directe de l’élément ul
, les propriétés CSS de l’élément parent sont héritées par ses enfants, donc le style attribué à l’élément ul
sera hérité par ses éléments li
enfants.
Tous les éléments ne disposent pas d’un identifiant permettant de les sélectionner. En effet, seuls quelques éléments clés de la mise en page d’une page sont censés avoir un identifiant. Prenez par exemple les listes de planètes utilisées dans l’exemple de code. Bien qu’il soit possible d’attribuer des identifiants uniques à chacun de ces éléments répétés, cette méthode n’est pas pratique pour les pages plus longues comportant de nombreux contenus. Nous pouvons plutôt utiliser l’identifiant de l’élément parent div
comme sélecteur pour modifier les propriétés de ses éléments internes.
Cependant, l’élément div
n’est pas directement lié aux listes HTML, donc lui ajouter la propriété list-style-type
n’aura aucun effet sur ses enfants. Ainsi, pour changer le cercle noir des listes à l’intérieur du contenu div
en un cercle creux, nous devons utiliser un sélecteur descendant :
#topmenu {
list-style-type: none
}
#content ul {
list-style-type: circle
}
Le sélecteur #content ul
est appelé sélecteur descendant car il ne correspond qu’aux éléments ul
qui sont enfants de l’élément dont l’identifiant est content
. Nous pouvons utiliser autant de niveaux de descendance que nécessaire. Par exemple, l’utilisation de #content ul li
ne correspondrait qu’aux éléments li
qui sont des descendants des éléments ul
qui sont des descendants de l’élément dont l’ID est content
. Mais dans cet exemple, le sélecteur le plus long aura le même effet que l’utilisation de #content ul
, car les éléments li
héritent des propriétés CSS définies pour leur parent ul
. Les sélecteurs descendants sont une technique essentielle lorsque la mise en page devient plus complexe.
Supposons que vous souhaitiez modifier la propriété font-style
des éléments de la liste topmenu
et de la liste de bas de page footer div pour leur donner un aspect oblique. Vous ne pouvez pas simplement écrire une règle CSS en utilisant ul
comme sélecteur, car cela modifierait également les éléments de la liste de la division content div. Jusqu’à présent, nous avons modifié les propriétés CSS en utilisant un sélecteur à la fois, et cette méthode peut également être utilisée pour cette tâche :
#topmenu {
font-style: oblique
}
#footer ul {
font-style: oblique
}
Les sélecteurs distincts ne sont cependant pas la seule façon de procéder. Le CSS nous permet de regrouper les sélecteurs qui partagent un ou plusieurs styles, en utilisant une liste de sélecteurs séparés par des virgules :
#topmenu, #footer ul {
font-style: oblique
}
Le regroupement des sélecteurs élimine le travail supplémentaire que représente l’écriture de styles en double. En outre, il se peut que vous souhaitiez modifier à nouveau la propriété à l’avenir et que vous ne vous souveniez pas de la modifier à tous les endroits différents.
Classes
Si vous ne voulez pas trop vous soucier de la hiérarchie des éléments, vous pouvez simplement ajouter une classe class
à l’ensemble des éléments que vous voulez personnaliser. Les classes sont similaires aux identifiants, mais au lieu d’identifier un seul élément dans la page, elles peuvent identifier un groupe d’éléments partageant les mêmes caractéristiques.
Prenez l’exemple de la page HTML sur laquelle nous travaillons, par exemple. Il est peu probable que dans les pages du monde réel, nous trouvions des structures aussi simples que celle-ci. Il serait donc plus pratique de sélectionner un élément en utilisant uniquement les classes, ou une combinaison de classes et de descendance. Pour appliquer la propriété font-style: oblique
aux listes de menus en utilisant les classes, nous devons d’abord ajouter la propriété class
aux éléments du fichier HTML. Nous le ferons d’abord dans le menu supérieur :
<ul id="topmenu" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
Et ensuite dans le menu du bas de page :
<div id="footer">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/about">About</a></li>
</ul>
</div><!-- #footer -->
Avec ça, nous pouvons remplacer le groupe de sélecteurs #topmenu, #footer ul
par le sélecteur basé sur la classe .menu
:
.menu {
font-style: oblique
}
Comme pour les sélecteurs basés sur les identifiants, l’ajout du nom de la balise à gauche du point dans les sélecteurs basés sur les classes est facultatif. Toutefois, contrairement aux identifiants, la même classe est censée être utilisée dans plus d’un élément et il n’est même pas nécessaire qu’ils soient du même type. Par conséquent, si la classe menu
est partagée entre différents types d’éléments, l’utilisation du sélecteur ul.menu
ne correspondrait qu’aux éléments ul
ayant la classe menu
. Au contraire, l’utilisation du sélecteur .menu
correspondra à tout élément ayant la classe menu
, quel que soit son type.
De plus, les éléments peuvent être associés à plus d’une classe. Nous pourrions différencier le menu supérieur et le menu inférieur en ajoutant une classe supplémentaire à chacun d’eux :
<ul id="topmenu" class="menu top">
Et dans le menu du bas de page :
<ul class="menu footer">
Lorsque l’attribut class
comporte plus d’une classe, elles doivent être séparées par des espaces. Maintenant, en plus de la règle CSS partagée entre les éléments de la classe menu
, nous pouvons aborder les menus du haut et du bas de page en utilisant leurs classes correspondantes :
.menu {
font-style: oblique
}
.menu.top {
font-size: large
}
.menu.footer {
font-size: small
}
Faites attention au fait que l’écriture de .menu.top
diffère de celle de .menu .top
(avec un espace entre les mots). Le premier sélecteur correspondra aux éléments qui ont les deux classes menu
et top
, tandis que le second correspondra aux éléments qui ont la classe top
et un élément parent avec la classe menu
.
Sélecteurs spéciaux
Les sélecteurs CSS peuvent également correspondre aux états dynamiques des éléments. Ces sélecteurs sont particulièrement utiles pour les éléments interactifs, tels que les hyperliens. Vous pouvez souhaiter modifier l’apparence des hyperliens lorsque le pointeur de la souris passe dessus, afin d’attirer l’attention du visiteur.
Pour revenir à notre page d’exemple, nous pourrions supprimer le soulignement des liens dans le menu supérieur et afficher une ligne uniquement lorsque le pointeur de la souris passe sur le lien correspondant. Pour ce faire, nous écrivons d’abord une règle pour supprimer le soulignement des liens dans le menu supérieur :
.menu.top a {
text-decoration: none
}
Ensuite, nous utilisons la pseudo-classe :hover
sur ces mêmes éléments pour créer une règle CSS qui s’appliquera uniquement lorsque le pointeur de la souris se trouve sur l’élément correspondant :
.menu.top a:hover {
text-decoration: underline
}
Le sélecteur de pseudo-classe :hover
accepte toutes les propriétés CSS des règles CSS classiques. Les autres pseudo-classes comprennent :visited
, qui correspond aux hyperliens qui ont déjà été visités, et :focus
, qui correspond aux éléments de formulaire qui ont reçu le focus.
Exercices guidés
-
Supposons qu’une page HTML soit associée à une feuille de style contenant les deux règles suivantes :
p { color: green; } p { color: red; }
Quelle couleur le navigateur appliquera-t-il au texte contenu dans les éléments
p
? -
Quelle est la différence entre l’utilisation du sélecteur d’identification
div#main
et#main
? -
Quel sélecteur correspond à tous les éléments
p
utilisés à l’intérieur d’unediv
avec l’attribut d’identification#main
? -
Quelle est la différence entre l’utilisation du sélecteur de classe
p.highlight
et.highlight
?
Exercices d’exploration
-
Écrire une seule règle CSS qui change la propriété
font-style
enoblique
. La règle doit correspondre uniquement aux élémentsa
qui se trouvent à l’intérieur de<div id="sidebar"></div>
ou de<ul class="links"></ul>
. -
Supposons que vous souhaitiez modifier le style des éléments dont l’attribut
class
est défini surarticle reference
, comme dans<p class="article reference">
. Cependant, le sélecteur.article .reference
ne semble pas modifier leur apparence. Pourquoi le sélecteur ne correspond-il pas aux éléments comme prévu ? -
Écrire une règle CSS pour changer la propriété
color
de tous les liens visités dans la page àred
.
Résumé
Cette leçon explique comment utiliser les sélecteurs CSS et comment le navigateur décide des styles à appliquer à chaque élément. Séparé du balisage HTML, CSS fournit de nombreux sélecteurs permettant de faire correspondre des éléments individuels ou des groupes d’éléments dans la page. La leçon aborde les concepts et procédures suivants :
-
Styles pour toute la page et héritage des styles.
-
Stylisation des éléments par type.
-
Utilisation de l’identifiant et de la classe de l’élément comme sélecteur.
-
Sélecteurs composés.
-
Utilisation de pseudo-classes pour styliser dynamiquement les éléments.
Réponses aux exercices guidés
-
Supposons qu’une page HTML soit associée à une feuille de style contenant les deux règles suivantes :
p { color: green; } p { color: red; }
Quelle couleur le navigateur appliquera-t-il au texte contenu dans les éléments
p
?La couleur
red
. Lorsque deux sélecteurs équivalents ou plus ont des propriétés contradictoires, le navigateur choisira le dernier. -
Quelle est la différence entre l’utilisation du sélecteur d’identification
div#main
et#main
?Le sélecteur
div#main
correspond à un élémentdiv
ayant pour identifiantmain
, tandis que le sélecteur#main
correspond à l’élément ayant pour identifiantmain
, quel que soit son type. -
Quel sélecteur correspond à tous les éléments
p
utilisés à l’intérieur d’unediv
avec l’attribut d’identification#main
?Le sélecteur
#main p
oudiv#main p
. -
Quelle est la différence entre l’utilisation du sélecteur de classe
p.highlight
et.highlight
?Le sélecteur
p.highlight
correspond uniquement aux éléments de typep
ayant la classehighlight
, tandis que le sélecteur.highlight
correspond à tous les éléments ayant la classehighlight
, quel que soit leur type.
Réponses aux exercices d’exploration
-
Écrire une seule règle CSS qui change la propriété
font-style
enoblique
. La règle doit correspondre uniquement aux élémentsa
qui se trouvent à l’intérieur de<div id="sidebar"></div>
ou de<ul class="links"></ul>
.#sidebar a, ul.links a { font-style: oblique }
-
Supposons que vous souhaitiez modifier le style des éléments dont l’attribut
class
est défini surarticle reference
, comme dans<p class="article reference">
. Cependant, le sélecteur.article .reference
ne semble pas modifier leur apparence. Pourquoi le sélecteur ne correspond-il pas aux éléments comme prévu ?Le sélecteur
.article .reference
correspondra aux éléments ayant la classereference
qui sont des descendants des éléments ayant la classearticle
. Pour faire correspondre des éléments ayant à la fois les classesarticle
etreference
, le sélecteur doit être.article.reference
(sans espace entre les deux). -
Écrire une règle CSS pour changer la propriété
color
de tous les liens visités dans la page àred
.a:visited { color: red; }