Comprendre la relation Parent Enfant des éléments HTML en CSS

En CSS, la relation parent enfant entre les éléments est fondamentale dans l’apprentissage du développement Front-end, pour la création de mises en page et la sélection précise des éléments HTML.

Saisir la notion de hiérarchie HTML-CSS pour cibler précisément des éléments selon leur position de parent ou d’enfant dans la structure, ce qui rend votre stylisation plus efficace.
Comprendre comment certains styles se transmettent automatiquement d’un élément parent à ses enfants pour éviter de répéter inutilement des règles CSS.
Apprendre à utiliser le sélecteur enfant (>) pour appliquer des styles uniquement aux descendants directs, offrant un contrôle plus fin et propre de vos règles CSS.

Comprendre cette relation permet de cibler spécifiquement certains éléments en fonction de leur position dans la hiérarchie du document HTML. Nous allons explorer en détail la notion de parents et enfants en CSS, accompagnée d’exemples concrets et de code.

Introduction à la relation Parent Enfant
L'héritage entre parent et enfant
Allez plus loin : Introduction au DOM
Utilisation du sélecteur d'enfant >

Introduction à la relation Parent Enfant

En CSS, chaque élément HTML peut être considéré comme un nœud dans une arborescence, avec des relations de parenté et de descendance. Un élément parent est celui qui contient d’autres éléments à l’intérieur, tandis qu’un élément enfant est contenu à l’intérieur d’un autre élément.

Dans le code HTML ci-dessous, l’élément <ul> est l’élément parent de l’élément <li> :

<!-- <ul> est le parent des éléments <li> -->
<ul>
    <li>Élément enfant</li>
    <li>Élément enfant</li>
</ul>

La compréhension de cette relation est cruciale pour cibler précisément les éléments que vous souhaitez styliser ou manipuler via CSS. Cela ne concerne pas que les listes, dans l’exemple ci-dessous, les éléments <h1> et <p> sont des enfants de l’élément <article> ou l’élément <article> est l’élément parent des éléments <h1> et <p>.

<article>
    <h1>Titre de l'article</h1>
    <p>Paragraphe de l'article</p>
</article>

Un enfant direct dans le contexte du HTML et du CSS est un élément qui est immédiatement contenu à l’intérieur d’un autre élément, sans aucun autre élément intermédiaire entre eux dans la structure hiérarchique. <h1> et <p> sont donc des enfants directs de <article>

L’héritage entre parent et enfant

L’héritage en CSS est un mécanisme qui permet à certains styles définis sur un élément parent d’être automatiquement transmis à ses enfants. Cela signifie que les propriétés CSS définies sur un élément parent peuvent être héritées par ses enfants, sauf si ces enfants ont des styles définis explicitement qui les remplacent.

body {
    font-family: Arial;
}

Dans l’exemple ci-dessus, tous les éléments à l’intérieur des balises <body> auront la même police de caractère définie sur Arial. On dit que les enfants de <body> héritent des styles de l’élément parent (body).

Si vous définissez la police de caractère sur un élément parent, tous ses enfants hériteront de cette police à moins qu’une police différente ne soit explicitement spécifiée pour un enfant spécifique.

Allez plus loin : Introduction au DOM

Le DOM (Document Object Model) est une représentation hiérarchique et structurée d’un document HTML. Il fournit une interface de programmation standardisée pour accéder et manipuler les éléments, les attributs et le contenu d’un document web. Le DOM permet aux développeurs web d’interagir dynamiquement avec le contenu d’une page web, de modifier sa structure, son style et son comportement en utilisant CSS ou également en JavaScript.

Structure du DOM : Le DOM représente une page web comme un arbre d’objets, où chaque élément HTML est un nœud dans cet arbre. Les éléments, les attributs et le texte de la page sont tous représentés par des nœuds dans cet arbre. Voici une vue simplifiée de la structure du DOM pour une page web basique :

Document (racine)
│
├── <html>
│   ├── <head>
│   │   ├── <title>
│   │   └── ...
│   └── <body>
│       ├── <div>
│       │   ├── <p>
│       │   └── ...
│       └── ...
└── ...

Quand le navigateur lit votre fichier HTML, il ne le voit pas comme un simple texte. Il le transforme en une structure logique composée de nœuds reliés entre eux.

Chaque balise devient un élément du DOM. Chaque élément a une place précise dans une hiérarchie : il peut avoir un parent, des enfants, des frères, des ancêtres. Autrement dit, votre page n’est pas une suite de balises… c’est une famille organisée.

Comprendre cette organisation, c’est comprendre comment le navigateur pense votre page.

Pourquoi le DOM est fondamental en CSS

Le CSS ne s’applique jamais “au hasard”. Il s’applique en fonction de la position des éléments dans le DOM.

Quand vous écrivez une règle CSS, vous ne dites pas seulement “je veux styliser cet élément”. Vous dites en réalité :

“Je veux styliser cet élément s’il se trouve à cet endroit précis dans la structure.”

C’est pour cela que deux balises identiques peuvent réagir différemment au même CSS. Elles n’occupent pas la même place dans le DOM.

Comprendre le DOM, c’est donc :

mieux cibler vos éléments,
éviter les styles trop globaux,
réduire le nombre de classes inutiles,
écrire un CSS plus propre et plus prévisible.

Le DOM comme arbre : une image mentale essentielle

Imaginez votre HTML comme un arbre généalogique.

Le document est la racine.
Les grandes balises structurantes sont les branches principales.
Les éléments imbriqués sont les branches secondaires et les feuilles.

En CSS, vous pouvez :

cibler un élément parce qu’il est enfant d’un autre,
le styliser parce qu’il est contenu dans une section précise,
ou au contraire l’exclure parce qu’il est trop profond dans l’arbre.

Le DOM donne du contexte à chaque élément. Et le CSS se nourrit de ce contexte.

Cibler des éléments grâce à leur position dans le DOM

L’un des grands pouvoirs du CSS vient de sa capacité à utiliser la structure du DOM pour sélectionner des éléments.

Sans entrer dans des règles techniques détaillées, retenez ceci : le CSS peut dire “je veux cet élément, mais seulement s’il se trouve ici, et pas ailleurs”.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Cela permet :

de styliser des éléments différemment selon la section où ils se trouvent,
d’éviter de multiplier les classes purement décoratives,
de rendre votre code HTML plus sémantique.

Un bon CSS s’appuie sur le DOM avant de s’appuyer sur des classes.

Héritage et DOM : quand les styles se transmettent

Certains styles CSS se propagent naturellement dans le DOM. Un élément enfant peut “hériter” de propriétés définies sur son parent.

Ce mécanisme repose entièrement sur la structure du DOM. Si vous ne comprenez pas la relation parent-enfant entre vos éléments, l’héritage devient flou… et parfois frustrant.

Une bonne lecture du DOM vous permet :

de poser des styles globaux au bon endroit,
de limiter les répétitions,
de comprendre pourquoi un style s’applique sans être explicitement écrit.

Lire le DOM avec les outils du navigateur

Un réflexe à prendre très tôt : inspecter le DOM dans le navigateur.

Les outils de développement ne montrent pas votre HTML “tel que vous l’avez écrit”,
mais tel que le navigateur l’a compris et organisé.

C’est souvent là que se produit le déclic :

on voit réellement la hiérarchie,
on comprend pourquoi un sélecteur fonctionne… ou non,
on identifie immédiatement un problème de structure HTML.

Lire le DOM, c’est apprendre à dialoguer avec le navigateur.

Penser DOM avant de penser CSS

Avant d’écrire une règle CSS, posez-vous une question simple :

“Où se trouve réellement cet élément dans le DOM ?”

Très souvent, le problème ne vient pas du CSS, mais :

d’une structure HTML mal pensée,
d’un élément mal imbriqué,
ou d’un manque de hiérarchie logique.

Un HTML clair produit un DOM lisible. Un DOM lisible produit un CSS simple.

Le DOM, le chaînon manquant du CSS

Le DOM n’est pas réservé au JavaScript. Il est le socle invisible sur lequel repose tout votre CSS.

En comprenant comment votre page est structurée, comment les éléments sont reliés entre eux et comment le navigateur les interprète, vous passez d’un CSS “qui marche parfois” à un CSS maîtrisé, logique et durable.

À partir de là, chaque règle CSS devient un choix réfléchi, et non un ajustement à l’aveugle. Et c’est exactement à ce moment-là qu’on commence à coder proprement.

Utilisation du sélecteur d’enfant `>`

Le sélecteur d’enfant permet de cibler uniquement les éléments enfants directs d’un élément parent spécifique. Voici la syntaxe de base :

parent > enfant {
    /* styles */
}

Cela appliquera les styles uniquement aux éléments enfants qui sont directement descendants de l’élément parent.

Exemple concret du sélecteur d’enfant `>`

Prenons l’exemple d’un article symbolisé par la balise <article>. Cet article contiendra deux paragraphes <p>. L’un étant imbriqué dans une balise <header> et l’autre, étant l’enfant direct de la balise <article> (même si il ne suit pas cette balise immédiatement). Voici le code HTML :

<article class="article">
    
    <header>
        <h1>Titre de l'article</h1>
        <p>Paragraphe du header de l'article</p>
    </header>
    
    <p>Paragraphe de l'article (enfant direct de la balise <article>)</p>
    
</article>

Si on utilise le code CSS ci-dessous, tous les paragraphes <p> seront écrits en rouge :

.article p {
    /* Styles attrbiués à tous les élément p */
    color: red;
}

En revanche, si nous utilisons le code CSS ci-dessous, seul le deuxième paragraphe sera écrit en rouge. C’est un enfant direct de la balise <article> :

.article > p {
    /* Styles spécifiques aux éléments p enfants directs de article */
    color: red;
}

Le paragraphe <p> contenu dans la balise <header> ne sera pas écrit en rouge. Ce n’est pas un enfant direct de la balise <article> mais un enfant direct de la balise <header>

La relation parent enfant en CSS est un concept clé pour créer des mises en page et des styles précis. En utilisant le sélecteur d’enfant >, vous pouvez cibler spécifiquement les éléments enfants qui sont directement imbriqués dans un élément parent. Cela permet un contrôle plus fin sur la façon dont vos styles sont appliqués, améliorant ainsi la maintenabilité et la lisibilité de votre code CSS.

En comprenant et en maîtrisant cette relation, vous serez en mesure de créer des mises en page plus complexes et de styliser efficacement votre contenu HTML. Continuez à explorer et à expérimenter avec ces concepts pour enrichir vos compétences en développement web avec CSS.

Chapitre suivant : Classe et ID en HTML et CSS

Alban Guillier

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr