Le CSS (Cascading Style Sheets) est au cœur de la conception web moderne. Si les propriétés CSS classiques permettent de styliser les éléments de base, les pseudo-classes et pseudo-éléments ouvrent la porte à des fonctionnalités avancées, qui transforment véritablement l’apparence et l’interactivité des pages web.
Les pseudo-classes permettent d’appliquer des styles conditionnels, comme lors d’un survol ou d’une sélection, sans ajouter de JavaScript. Les pseudo-éléments, quant à eux, permettent de styliser des parties spécifiques d’un contenu, comme la première lettre d’un paragraphe ou du contenu ajouté automatiquement avant ou après un élément.
Dans ce cours, nous allons explorer ces concepts en profondeur. Vous apprendrez non seulement ce qu’ils sont et comment les utiliser, mais aussi comment les intégrer dans vos projets pour obtenir des designs à la fois modernes et interactifs. Que vous soyez débutant en CSS ou développeur chevronné, ce guide vous aidera à perfectionner vos compétences.
Dans ce tutoriel, vous découvrirez :
- Ce que sont les pseudo-classes et pseudo-éléments CSS, et comment les différencier.
- Les principales pseudo-classes comme
:hover,:nth-child()ou:focus. - Les pseudo-éléments les plus utiles, comme
::beforeet::after. - Des exemples pratiques pour les utiliser efficacement dans vos projets.
Comprendre les Pseudo-classes CSS
Les pseudo-classes CSS sont des outils puissants pour styliser des éléments en fonction de leur état, de leur position dans le DOM ou d’interactions spécifiques avec les utilisateurs. Elles permettent de gérer des comportements complexes sans toucher au HTML ou écrire une seule ligne de JavaScript.
Définition et Syntaxe
Une pseudo-classe est une instruction ajoutée à un sélecteur CSS sous la forme :pseudo-classe. Elle cible des éléments selon des critères spécifiques. Par exemple, pour changer la couleur d’un lien lors du survol de la souris :
a:hover {
color: blue;
}
Dans cet exemple, :hover est une pseudo-classe qui modifie la couleur d’un lien lorsqu’il est survolé.
Catégories principales des pseudo-classes
Pseudo-classes d’interaction (dynamiques) :
Les pseudo-classes d’interaction, souvent appelées pseudo-classes dynamiques, permettent de réagir aux actions des lecteurs, comme un clic ou un survol. Elles jouent un rôle central dans la conception de sites interactifs en stylisant les éléments selon des états spécifiques.
Les Principales Pseudo-classes Dynamiques
:hover
Cette pseudo-classe s’applique lorsqu’un utilisateur survole un élément avec la souris.
Exemple :
a:hover {
text-decoration: underline;
color: orange;
}
Dans cet exemple, les liens deviennent oranges et soulignés lorsqu’ils sont survolés.
:active
Utilisée pour cibler un élément pendant qu’il est cliqué ou activé.
Exemple :
button:active {
background-color: darkblue;
color: white;
}
Ici, le bouton change de couleur lorsque l’utilisateur maintient le clic.
:focus
S’applique lorsqu’un élément reçoit le focus, comme lors de la navigation clavier ou d’un clic dans un champ de formulaire.
Exemple :
input:focus {
outline: 2px solid #007bff;
background-color: #f1f1f1;
}
Cela permet de guider visuellement les visiteurs en stylisant les champs sélectionnés.
:visited
Stylise les liens déjà visités par le lecteur. Cela peut être utile pour différencier les liens déjà consultés des autres.
Exemple :
a:visited {
color: purple;
}
Pseudo-classes structurelles
Les pseudo-classes structurelles permettent de cibler des éléments spécifiques dans la structure HTML en fonction de leur position ou de leur relation avec d’autres éléments. Elles sont particulièrement utiles pour styliser des listes, tableaux ou sections complexes d’une page sans modifier directement le HTML.
Les Pseudo-classes structurelles les plus courantes
:first-child et :last-child
Ces pseudo-classes ciblent respectivement le premier et le dernier enfant d’un parent. Elles sont idéales pour styliser les bordures ou les marges d’éléments de liste ou de tableaux.
Exemple :
li:first-child {
font-weight: bold;
}
li:last-child {
color: red;
}
Dans cet exemple, le premier élément de la liste est en gras, et le dernier apparaît en rouge.
:nth-child(n) et :nth-of-type(n)
Ces pseudo-classes permettent de cibler les enfants selon une logique précise, comme tous les deuxièmes éléments (n pair) ou uniquement les enfants d’un certain type.
Exemple :
tr:nth-child(odd) {
background-color: #f9f9f9;
}
p:nth-of-type(3) {
text-transform: uppercase;
}
Ici, les lignes impaires (odd) d’un tableau reçoivent un fond gris clair, et le troisième paragraphe est transformé en majuscules.
:only-child et :only-of-type
Ces pseudo-classes sélectionnent un élément unique dans son parent.
:only-childcible les éléments qui sont les seuls enfants de leur parent.:only-of-typecible les éléments uniques de leur type au sein du parent.
Exemple :
div:only-child {
border: 2px solid green;
}
h2:only-of-type {
color: purple;
}
:empty
Cette pseudo-classe sélectionne les éléments sans contenu. Utile pour afficher des styles conditionnels.
Exemple :
p:empty {
display: none;
}
Ici, les paragraphes vides ne s’affichent pas.
:has()
Une pseudo-classe puissante qui permet de sélectionner des parents contenant des éléments spécifiques.
Exemple :
div:has(img) {
border: 1px solid blue;
}
Dans cet exemple, les div contenant une image reçoivent une bordure bleue.
Pourquoi Utiliser les Pseudo-classes Structurelles ?
- Simplifier le ciblage : Elles réduisent la dépendance aux classes et identifiants dans le HTML.
- Flexibilité accrue : Stylisez facilement des structures complexes.
- Code propre : Évitez les sélections redondantes ou trop spécifiques.
Pseudo-classes d’état
Les pseudo-classes d’état permettent de styliser des éléments en fonction de leur statut particulier, comme l’état d’un champ de formulaire ou d’une case à cocher. Elles sont essentielles pour gérer l’apparence des éléments interactifs et améliorer la clarté des interfaces.
Les Principales Pseudo-classes d’État
:checked
S’applique aux cases à cocher (checkboxes) ou aux boutons radio sélectionnés.
Exemple :
input[type="checkbox"]:checked {
outline: 2px solid green;
background-color: #d4ffd4;
}
Cet exemple met en évidence les cases cochées avec un contour vert et un fond coloré.
:disabled
Stylise les éléments désactivés, comme les champs ou les boutons non interactifs.
Exemple :
button:disabled {
background-color: gray;
color: white;
cursor: not-allowed;
}
Le bouton désactivé devient gris, indiquant visuellement qu’il est inutilisable.
:enabled
Contrairement à :disabled, cette pseudo-classe cible les éléments activés et interactifs.
Exemple :
input:enabled {
border: 1px solid blue;
}
:required et :optional
Ces pseudo-classes sont particulièrement utiles pour les formulaires :
:requiredcible les champs obligatoires.:optionalcible ceux qui ne le sont pas.
Exemple :
input:required {
border-left: 4px solid red;
}
input:optional {
border-left: 4px solid green;
}
:valid et :invalid
Utilisées pour afficher des retours visuels sur les champs de formulaire en fonction des règles de validation HTML.
Exemple :
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
Avantages des Pseudo-classes d’État
- Amélioration de la clarté : Indiquez visuellement les statuts des champs ou des boutons.
- Feedback immédiat : Fournissez des retours en temps réel sans nécessiter de JavaScript.
- Flexibilité : Gérez facilement des scénarios interactifs complexes avec des règles simples.
Comprendre les les Pseudo-éléments CSS
Les pseudo-éléments CSS permettent de cibler et de styliser des parties spécifiques d’un élément HTML ou d’ajouter des contenus sans modifier directement le code HTML. Ils sont particulièrement utiles pour les designs complexes et les effets visuels avancés.
Définition et Syntaxe
Un pseudo-élément est indiqué dans le sélecteur CSS par deux-points doubles (::) suivis de son nom, comme ::before ou ::after. Cette notation distingue les pseudo-éléments des pseudo-classes.
Exemple :
p::first-line {
font-weight: bold;
}
Dans cet exemple, seule la première ligne des paragraphes est mise en gras.
Les principaux pseudo-éléments
::before et ::after
Ces pseudo-éléments permettent d’ajouter du contenu avant ou après un élément sans toucher au HTML.
Exemple :
h1::before {
content: "→ ";
color: gray;
}
h1::after {
content: " ←";
color: gray;
}
Résultat : Une flèche grise apparaît avant et après chaque titre h1.
::first-line
Cible uniquement la première ligne d’un élément textuel, parfait pour styliser les introductions.
Exemple :
p::first-line {
font-size: 1.2em;
color: navy;
}
::first-letter
S’applique à la première lettre d’un paragraphe, idéal pour des effets typographiques.
Exemple :
p::first-letter {
font-size: 2em;
font-weight: bold;
color: darkred;
}
::selection
Stylise la partie sélectionnée par l’utilisateur dans un élément.
Exemple :
::selection {
background-color: yellow;
color: black;
}
Résultat : Le texte sélectionné aura un fond jaune.
::marker
Permet de personnaliser les marqueurs des listes (<ul> et <ol>).
Exemple :
li::marker {
color: blue;
font-size: 1.5em;
}
Pourquoi Utiliser les Pseudo-éléments ?
- Ajouter du contenu dynamique : Insérez des éléments visuels ou textuels sans modifier le HTML.
- Typographie avancée : Créez des designs élégants avec
::first-lineou::first-letter. - Personnalisation des listes : Rendez vos listes uniques grâce à
::marker.
Pseudo-classes et pseudo-éléments avancés
Les pseudo-classes et pseudo-éléments ne se limitent pas aux bases. Leur utilisation avancée permet de résoudre des problèmes complexes, d’ajouter des effets sophistiqués et d’améliorer l’expérience globale sur un site web.
Combiner pseudo-classes et pseudo-éléments
L’association de pseudo-classes et pseudo-éléments peut créer des effets dynamiques uniques.
Exemple :
p:hover::before {
content: "🔥 ";
color: red;
}
Dans cet exemple, une icône apparaît avant un paragraphe lorsque la souris le survole.
Les nouvelles pseudo-classes CSS Avancées
:is() et :where()
Les pseudo-classes CSS :is() et :where() sont des outils puissants pour simplifier et optimiser les sélecteurs complexes. Introduites dans les spécifications CSS les plus récentes, elles permettent de regrouper plusieurs sélecteurs en un seul, tout en réduisant la complexité et en rendant le code plus lisible.
:is() : simplification des sélecteurs
La pseudo-classe :is() applique un style si au moins un des sélecteurs spécifiés correspond. Elle est idéale pour cibler plusieurs éléments ayant des styles communs.
Exemple :
:is(h1, h2, h3) {
color: navy;
font-family: Arial, sans-serif;
}
Dans cet exemple, tous les titres h1, h2, et h3 reçoivent les mêmes styles.
- Cas d’utilisation :
- Styliser différents niveaux de titres (
h1, h2, h3) de manière cohérente. - Simplifier le ciblage des éléments dans des listes ou des tableaux complexes.
- Styliser différents niveaux de titres (
:where() : sélecteurs avec spécificité nulle
La pseudo-classe :where() fonctionne comme :is(), mais avec une particularité importante : elle n’augmente pas la spécificité du sélecteur. Cela signifie que les styles définis avec :where() sont plus facilement écrasés par d’autres règles CSS.
Exemple :
:where(h1, h2, h3) {
margin: 0;
padding: 0;
}
Ici, les marges et les paddings des titres sont définis à 0, mais ces styles peuvent facilement être surchargés par d’autres règles plus spécifiques.
- Cas d’utilisation :
- Définir des styles de base pour des éléments multiples.
- Fournir des styles par défaut sans interférer avec des styles plus spécifiques.
Tableau comparatif
| Fonctionnalité | `:is()` | `:where()` |
|---|---|---|
| Spécificité | Dépend des sélecteurs internes. | Toujours avec une spécificité nulle. |
| Priorité des styles | Plus difficile à surcharger. | Facilement surchargé par d'autres règles. |
Exemples Pratiques
Combinaison avec d’autres pseudo-classes :
:is(a, button):hover {
color: red;
text-decoration: underline;
}
Dans cet exemple, les liens et boutons changent de couleur et sont soulignés au survol.
Styles par défaut avec :where():
:where(section, article, aside) {
padding: 1rem;
border: 1px solid #ccc;
}
Les sections, articles, et encadrés (aside) ont un style uniforme, facilement personnalisable.
Cas pratiques et projets
Pour maîtriser les pseudo-classes et pseudo-éléments CSS, rien de mieux que des exercices pratiques et des projets concrets. Ce chapitre propose plusieurs cas d’utilisation courants pour mettre en œuvre vos nouvelles compétences et explorer des possibilités créatives.
Projet 1 : Une navigation interactive
Créez une barre de navigation qui réagit aux actions des utilisateurs avec des pseudo-classes dynamiques et des pseudo-éléments.
HTML
<nav>
<a href="#home">Accueil</a>
<a href="#about">À propos</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
CSS
nav a {
text-decoration: none;
color: black;
position: relative;
padding: 10px 15px;
display: inline-block;
}
nav a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background-color: orange;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease-in-out;
}
nav a:hover::after {
transform: scaleX(1);
}
Description :
Une ligne colorée apparaît sous chaque lien lorsque vous le survolez.
Projet 2 : Une page d’article avec des styles typographiques
Utilisez ::first-letter et ::first-line pour styliser un paragraphe d’introduction comme dans les magazines.
HTML
<p class="intro">
Le CSS est un langage puissant qui permet de styliser vos pages web. Grâce aux pseudo-éléments, vous pouvez créer des designs sophistiqués et modernes.
</p>
<p>
Ce paragraphe est standard et ne possède pas les styles typographiques de l'introduction.
</p>
CSS
p.intro::first-line {
font-weight: bold;
font-size: 1.5em;
color: darkblue;
}
p.intro::first-letter {
font-size: 2em;
font-weight: bold;
float: left;
margin-right: 10px;
color: darkred;
}
Description :
La première ligne est mise en valeur, et la première lettre du paragraphe est stylisée pour imiter une mise en page de magazine.
Projet 3 : Validation visuelle d’un formulaire
Ajoutez des retours visuels en temps réel sur la validité des champs d’un formulaire.
HTML
<form>
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<button type="submit">Envoyer</button>
</form>
CSS
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
background-color: #ffe6e6;
}
input:required:focus {
outline: 2px solid orange;
}
Projet 4 : Liste ersonnalisée avec ::marker
Transformez une liste simple avec des marqueurs stylisés.
HTML
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
<li>Élément 4</li>
</ul>
CSS
ul li::marker {
color: purple;
font-size: 1.2em;
font-weight: bold;
}
ul li:nth-child(odd)::marker {
color: darkgreen;
}
Projet 5 : Boutons animés
Créez un bouton avec une animation simple en utilisant :hover et ::after.
HTML
<button>Cliquez ici</button>
CSS
ul li::marker {
color: purple;
font-size: 1.2em;
font-weight: bold;
}
ul li:nth-child(odd)::marker {
color: darkgreen;
}
Description :
Une flèche apparaît à droite du bouton lorsqu’il est survolé.
Conclusion
Les pseudo-classes et pseudo-éléments CSS sont des outils incontournables pour tout développeur ou designer souhaitant créer des sites modernes, interactifs et visuellement attrayants. Leur capacité à styliser des états spécifiques ou des parties ciblées d’un contenu permet d’aller au-delà des limites des sélecteurs CSS traditionnels.
Résumé des Points Clés
- Pseudo-classes CSS : Elles offrent un moyen simple et puissant de gérer les interactions utilisateur (comme
:hoverou:focus), les statuts (comme:validou:checked) et la structure des éléments (comme:nth-child()). - Pseudo-éléments CSS : Ils permettent d’enrichir visuellement vos contenus en stylisant des parties spécifiques comme
::first-lineou::first-letter, ou en ajoutant des éléments graphiques dynamiques via::beforeet::after. - Avancées récentes : Des outils comme
:is()et:where()simplifient les sélecteurs complexes, tandis que:has()ouvre la porte à des possibilités inédites en CSS.
Pourquoi maîtriser ces outils ?
- Flexibilité et propreté du code : Avec ces sélecteurs avancés, vous réduisez les dépendances aux classes HTML supplémentaires, ce qui rend votre code plus propre et maintenable.
- Interactivité sans JavaScript : De nombreux effets interactifs peuvent être réalisés uniquement avec CSS, réduisant la complexité globale de vos projets.
- Compatibilité moderne : Avec le support croissant des navigateurs pour les nouvelles pseudo-classes, vous pouvez intégrer des fonctionnalités avancées tout en assurant une bonne compatibilité.
Conseils pour aller plus loin
- Pratiquez régulièrement : Expérimentez avec des projets pratiques pour consolider vos connaissances.
- Suivez les standards : Consultez les spécifications CSS sur des ressources fiables comme MDN pour rester à jour.
- Testez dans les navigateurs : Assurez-vous que vos styles fonctionnent comme prévu sur tous les navigateurs cibles.
