8.1 Concepts de base
Combiner les pseudo-classes et les pseudo-éléments en CSS te permet de créer des sélecteurs puissants et flexibles pour styliser des éléments en fonction de leur état, structure et contenu. Cela ouvre de nombreuses possibilités pour créer des styles complexes et dynamiques qui améliorent l'interface utilisateur et l'expérience d'interaction avec la page web.
Les bases de la combinaison
Pseudo-classes
Les pseudo-classes sont indiquées par un seul deux-points (:) et s'appliquent aux éléments en fonction de leur état ou position. Par exemple :
:hover— s'applique lorsque le curseur survole l'élément:first-child— choisit le premier élément enfant du parent
Pseudo-éléments
Les pseudo-éléments sont indiqués par deux deux-points (::) et sont utilisés pour styliser des parties d'éléments ou ajouter du contenu. Par exemple :
::before— ajoute du contenu avant l'élément::first-letter— stylise la première lettre de l'élément
Combinaison
Les pseudo-classes et les pseudo-éléments peuvent être combinés pour créer des sélecteurs complexes, permettant d'appliquer des styles à des éléments en fonction de leur état et structure.
Syntaxe :
selector:pseudo-classe::pseudo-élément {
propriétés: valeurs;
}
8.2 Combinaison pour l'interactivité
Exemple 1: Stylisation de la première lettre au survol
Dans cet exemple, la première lettre du paragraphe s'agrandit et devient rouge lorsque le curseur survole le paragraphe :
/* Stylisation de la première lettre du paragraphe au survol du curseur */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Exemple 2: Ajouter du contenu avant un lien au focus
Dans cet exemple, une icône est ajoutée avant le lien et devient bleue lorsque le lien reçoit le focus :
/* Ajouter une icône avant le lien au focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Combinaison pour styliser la structure
Exemple 3: Styliser le premier paragraphe à l'intérieur d'un div en ajoutant du contenu
Dans cet exemple, la première ligne du premier paragraphe à l'intérieur d'un div est mise en gras et colorée en vert :
/* Styliser la première ligne du premier paragraphe à l'intérieur du div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Exemple 4: Ajouter un élément décoratif après le dernier élément de la liste
Dans cet exemple, un élément décoratif est ajouté après le dernier élément de la liste et est coloré en rouge :
/* Ajouter un élément décoratif après le dernier élément de la liste */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Combinaison pour des conditions complexes
Exemple 5: Stylisation des éléments de liste pairs au survol
Dans cet exemple, les éléments de liste pairs reçoivent un fond gris clair et un texte bleu au survol du curseur :
/* Stylisation des éléments de liste pairs au survol du curseur */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Exemple 6: Stylisation des liens actifs déjà visités
Dans cet exemple, les liens qui ont été visités et qui sont en état actif sont colorés en orange et soulignés :
/* Stylisation des liens actifs déjà visités */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Exemple de mise en œuvre complète
/* Styliser la première ligne du premier paragraphe à l'intérieur du div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Ajouter un élément décoratif après le dernier élément de la liste */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Stylisation des éléments de liste pairs au survol du curseur */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Ajouter une icône avant le lien au focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Stylisation de la première lettre du paragraphe au survol du curseur */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de combinaison de pseudo-classes et pseudo-éléments</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>C'est le premier paragraphe dans le div.</p>
<p>C'est le deuxième paragraphe dans le div.</p>
</div>
<ul>
<li>Élément de la liste 1</li>
<li>Élément de la liste 2</li>
<li>Élément de la liste 3</li>
<li>Élément de la liste 4</li>
</ul>
<a href="#">Lien avec icône au focus</a>
<p>Survole ce paragraphe pour voir l'effet sur la première lettre.</p>
</body>
</html>
GO TO FULL VERSION