10.1 Pseudo-classes
Les pseudo-classes et pseudo-éléments en HTML et CSS permettent de styliser les éléments en fonction de leur état ou de leur contenu, sans avoir besoin d'ajouter des classes supplémentaires ou de modifier la structure du document HTML. Ils offrent des outils sympas pour créer des pages web interactives et esthétiquement plaisantes.
Les pseudo-classes s'appliquent aux éléments en fonction de leur état ou de leur position dans la structure du document. Elles aident à styliser les éléments dans différentes situations, comme le survol, le focus ou la sélection des éléments. Les pseudo-classes commencent par deux-points (:).
Les pseudo-classes les plus simples :
La pseudo-classe :hover s'applique à un élément lorsque l'utilisateur le survole avec le curseur.
<button type="button">Bouton</button>
button:hover {
color: red;
}
La pseudo-classe :focus s'applique à un élément lorsqu'il obtient le focus, par exemple en cliquant dans un champ de saisie.
<input type="text">
input:focus {
outline-color: blue;
}
La pseudo-classe :active s'applique à un élément lorsqu'il est actif, par exemple lors d'un clic sur un lien ou un bouton.
<button type="button">Bouton</button>
button:active {
background-color: green;
}
La pseudo-classe :visited s'applique aux liens que l'utilisateur a déjà visités.
<a href="#">Lien</a>
a:visited {
color: purple;
}
10.2 Pseudo-éléments
Les pseudo-éléments permettent de styliser des parties d'éléments qui ne sont pas des éléments HTML distincts. Ils commencent par deux deux-points (::). Les pseudo-éléments sont utilisés pour créer et styliser du contenu avant ou après un élément, mettre en évidence la première ligne ou la première lettre d'un élément, et d'autres tâches.
Les pseudo-éléments les plus simples :
Le pseudo-élément ::before insère du contenu avant le contenu de l'élément.
<p>Je m'appelle Stepane.</p>
p::before {
content: "Salut! ";
color: blue;
}
Le pseudo-élément ::after insère du contenu après le contenu de l'élément.
<p>Attention!</p>
p::after {
content: " Merci pour votre attention!";
color: red;
}
Le pseudo-élément ::first-line s'applique à la première ligne d'un élément. Il permet de styliser uniquement la première ligne de texte.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
Le pseudo-élément ::selection s'applique au texte sélectionné par l'utilisateur.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Essayez de sélectionner le texte dans le résultat.
10.3 Exemples d'utilisation des pseudo-éléments
Les pseudo-classes et pseudo-éléments en HTML et CSS offrent de superbes possibilités pour styliser les éléments en fonction de leur état ou de leur contenu. Ils permettent de créer des pages web plus interactives et visuellement attrayantes sans modifier la structure HTML.
Exemple 1 : Insertion d'une icône avant le texte du lien
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Ceci est un lien avec une icône</a>
</body>
</html>
Exemple 2 : Ajout d'un bloc stylisé après un paragraphe
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>
Combinaison
Les pseudo-classes et pseudo-éléments peuvent être combinés pour créer des styles complexes et puissants.
Exemple : Stylisation du texte sélectionné à l'intérieur d'un lien au survol
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Sélectionne ce texte puis survole-le avec la souris.</a>
</body>
</html>
GO TO FULL VERSION