Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Sélecteurs : classes, attributs et relations | SovranCode

Contenu du coursSelectors and Relationships · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS47 min

Selectors and Relationships

Target elements with type, class, attribute, and relationship selectors without making rules fragile.

Les sélecteurs décrivent les éléments auxquels une règle peut s’appliquer. Une classe fournit un point d’accroche réutilisable ; un attribut peut exprimer un état ; un combinateur décrit une relation dans le document. Choisissez un sélecteur assez précis pour viser le bon composant, mais pas plus contraignant que nécessaire.

Repérer ce que chaque règle sélectionne

Avant de modifier cet exemple, identifiez les éléments visés par chaque sélecteur. Demandez-vous ensuite quel changement la règle produit et ce qui se passerait si la structure HTML évoluait.

.card { border: 1px solid; }
.card > h2 { margin-block-start: 0; }
.card[data-featured="true"] {
  border-color: #718817;
}
.card + .card { margin-block-start: 1rem; }

Les bons réflexes

Utilisez des classes pour les styles de composants réutilisables.
Utilisez un sélecteur d’enfant direct lorsque cette relation fait réellement partie de la structure attendue.
Réservez de préférence les identifiants aux liens internes et aux scripts plutôt qu’aux styles courants.

L’erreur à éviter

Une longue chaîne comme main .page section div.card h2 dépend de nombreux conteneurs. Elle se réutilise difficilement et rend les surcharges plus délicates : une classe de composant est souvent un point de départ plus simple.

ATELIER CSS · ENVIRON 25 MIN

Cibler la navigation sans toucher involontairement aux sous-menus

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Partir des relations réelles dans le document

.menu a sélectionne les liens situés n’importe où à l’intérieur de .menu. En revanche, .menu > li ne cible que ses enfants li immédiats. La différence apparaît dès qu’on ajoute un sous-menu : un sélecteur de descendant trop large peut appliquer aux entrées imbriquées les styles prévus pour le premier niveau. Examinez l’arbre des éléments, précisez la relation qui vous intéresse et choisissez le sélecteur correspondant. Une classe sur le composant est généralement plus claire qu’une chaîne liée à tous les conteneurs de la page.

Distinguer la structure, l’état et la décoration

Un sélecteur comme [aria-current='page'] permet de mettre en forme un lien dont l’état de page active existe déjà dans HTML. Une pseudo-classe telle que :hover cible un état ou une relation ; un pseudo-élément comme ::before désigne une partie générée. Gardez les consignes essentielles dans le HTML et ne signalez pas une sélection uniquement par la couleur. Enfin, :where() regroupe des sélecteurs sans ajouter de spécificité : c’est pratique pour des règles de base que les composants doivent pouvoir remplacer facilement.

Voir jusqu’où un sélecteur s’applique

Prévoyez la différence, puis comparez les deux aperçus. Ils utilisent exactement le même HTML.

Avant correction

.menu li { border:3px solid #2458a0; padding:8px; }

Après correction

.menu > li { border:3px solid #2458a0; padding:8px; }

Avant correction, le sélecteur de descendant ajoute une bordure aux deux li. Après correction, seul l’enfant direct de .menu la reçoit. Le contenu imbriqué et la structure HTML restent identiques.

Examiner le HTML commun

<ul class="menu"><li>Leçons<ul><li>Leçon CSS imbriquée</li></ul></li></ul>

Essayez la correction dans l’éditeur ci-dessous, puis testez une largeur réduite et un contenu plus long.

Retirez > dans .menu > li. Repérez l’entrée du sous-menu qui reçoit alors la bordure, puis rétablissez le sélecteur d’enfant direct.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 2rem; }
.menu { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0; list-style: none; }
.menu > li { border-top: 3px solid #254fc0; padding: .75rem; }
.menu a { color: #153b82; }
.menu [aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }
</style>
</head>
<body>
<nav aria-label="Navigation de l’atelier"><ul class="menu"><li><a href="#home" aria-current="page">Accueil</a></li><li><a href="#lessons">Leçons</a><ul><li><a href="#css">Leçons CSS</a></li></ul></li></ul></nav><p id="home">Vue d’ensemble</p><p id="lessons">Liste des leçons</p><p id="css">Ressources CSS</p>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 2rem; }
.menu { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0; list-style: none; }
.menu > li { border-top: 3px solid #254fc0; padding: .75rem; }
.menu a { color: #153b82; }
.menu [aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }
</style>
</head>
<body>
<nav aria-label="Navigation de l’atelier"><ul class="menu"><li><a href="#home" aria-current="page">Accueil</a></li><li><a href="#lessons">Leçons</a><ul><li><a href="#css">Leçons CSS</a></li></ul></li></ul></nav><p id="home">Vue d’ensemble</p><p id="lessons">Liste des leçons</p><p id="css">Ressources CSS</p>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.menu li { display: inline-block; border: 2px solid; }

Voir la correction et son explication

.menu > li { display: inline-block; border: 2px solid; }

Le sélecteur de descendant touche aussi les li imbriqués. Le combinateur > limite la règle aux enfants directs du menu principal.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez une navigation avec un sous-menu et un lien vers la page active. Les liens imbriqués doivent rester lisibles, sans recevoir la bordure prévue pour les entrées du premier niveau.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cibler la navigation sans toucher involontairement aux sous-menus — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Cibler la navigation sans toucher involontairement aux sous-menus</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cibler la navigation sans toucher involontairement aux sous-menus — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Cibler la navigation sans toucher involontairement aux sous-menus</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Seules les entrées directement placées dans le menu reçoivent les styles du premier niveau.La page active est indiquée par aria-current et par un style visible.Ajouter un conteneur autour de la navigation ne casse pas les sélecteurs du composant.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quel sélecteur vise uniquement les enfants li immédiats de .menu ?.menu li.menu > li.menu + li

2. Quel sélecteur n’ajoute aucune spécificité pour ses arguments ?:where(.menu a):is(.menu a)#menu a

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Selectors and Relationships

Repérer ce que chaque règle sélectionne

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Cibler la navigation sans toucher involontairement aux sous-menus

Partir des relations réelles dans le document

Distinguer la structure, l’état et la décoration

Voir jusqu’où un sélecteur s’applique

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris