Sélecteurs imbriqués en CSS
En CSS, les sélecteurs imbriqués permettent de cibler des éléments spécifiques en fonction de leur position ou de leur relation hiérarchique dans le DOM (Document Object Model). Voici une explication simple suivie d’un exercice.
Exemple 1 : .parent .enfant .petitenfant
.parent .enfant .petitenfant {
color: red;
}
Analyse :
- Sélecteur :
.parent .enfant .petitenfant - Effet : la règle s’applique uniquement à l’élément avec la classe
.petitenfant, mais uniquement si cet élément est contenu dans un élément avec la classe.enfant, qui est lui-même dans un élément avec la classe.parent.
Exemple HTML :
<div class="parent">
<div class="enfant">
<p class="petitenfant">Texte rouge (car il respecte la hiérarchie).</p>
</div>
</div>
Attention :
Si la structure n’est pas respectée, l’élément .petitenfant ne sera pas affecté. Par exemple, dans ce cas, la règle ne s’appliquera pas :
<div class="parent">
<p class="petitenfant">Ce texte ne sera pas rouge (hors hiérarchie).</p>
</div>
Exemple 2 : .parent .petitenfant
.parent .petitenfant {
color: red;
}
Analyse :
- Sélecteur :
.parent .petitenfant - Effet : cette règle est plus générale. Elle s’applique à tous les éléments avec la classe
.petitenfantà l’intérieur de.parent, peu importe s’il y a une classe intermédiaire comme.enfant.
Exemple HTML :
<div class="parent">
<p class="petitenfant">Texte rouge (sans besoin de .enfant).</p>
</div>
Exemple 3 : p .nomdeclass et .nomdeclass p
Cas 1 : p .nomdeclass
p .nomdeclass {
color: red;
}
- Effet : cible les éléments ayant la classe
.nomdeclassqui sont à l’intérieur d’un paragraphe<p>. - Exemple HTML :
<p>
<span class="nomdeclass">Texte rouge (contenu dans un paragraphe).</span>
</p>
Cas 2 : .nomdeclass p
.nomdeclass p {
color: red;
}
- Effet : cible les paragraphes
<p>qui sont à l’intérieur d’un élément avec la classe.nomdeclass. - Exemple HTML :
<div class="nomdeclass">
<p>Texte rouge (paragraphe dans .nomdeclass).</p>
</div>
Exercice
Objectif :
Comprendre les différences entre ces sélecteurs CSS et leur effet sur la structure HTML.
Étape 1 : Créer le fichier HTML dans un dossier « chapitre-7.5 »
Explication sur la balise <div> :
Dans cet exercice, on utilise la balise <div>, qui sert de diviseur ou conteneur pour regrouper des éléments. Cette balise n’a pas de signification sémantique particulière et est utilisée pour structurer la page.
Note : la balise
<div>sera abordée plus en détail dans un prochain chapitre pour explorer toutes ses utilisations.
Voici le contenu du fichier index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice : Sélecteurs imbriqués</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="enfant">
<p class="petitenfant">Texte 1 : Rouge (structure complète).</p>
</div>
<p class="petitenfant">Texte 2 : Bleu (structure partielle).</p>
</div>
<p>
<span class="nomdeclass">Texte 3 : Vert (dans un paragraphe).</span>
</p>
<div class="nomdeclass">
<p>Texte 4 : Orange (paragraphe dans .nomdeclass).</p>
</div>
</body>
</html>
Étape 2 : Créer le fichier CSS
Ajoutez ces règles dans style.css :
/* Rouge : uniquement si .petitenfant est dans .enfant, qui est dans .parent */
.parent .enfant .petitenfant {
color: red;
}
/* Bleu : s'applique à .petitenfant situé directement dans .parent */
.parent .petitenfant {
color: blue;
}
/* Vert : s'applique à tout élément avec la classe .nomdeclass contenu dans un <p> */
p .nomdeclass {
color: green;
}
/* Orange : s'applique à tout <p> contenu dans un élément avec la classe .nomdeclass */
.nomdeclass p {
color: orange;
}
Étape 3 : Tester les résultats
- Ouvrir le fichier HTML dans un navigateur.
- Observer comment chaque règle CSS affecte les différents éléments en fonction de leur structure et de leur hiérarchie.
Résumé
- Sélecteurs imbriqués permettent de styliser des éléments en fonction de leur position ou relation hiérarchique.
- Plus la règle est précise, plus elle limite son application.
Ce qu’il faut retenir
Vous voulez modifier uniquement les paragraphes d’une page spécifique, homepage par exemple, avec WordPress et Elementor ?
Une homepage WordPress utilisant Elementor possède la classe home dans la balise <body>, il est donc possible de cibler spécifiquement les paragraphes de cette page dans le CSS.
Voici comment procéder :
.home p {
color: blue; /* Change la couleur des paragraphes uniquement de la page "home" */
}
Explication
.home: cible uniquement les pages dont la balise<body>contient la classehome.p: applique le style à tous les paragraphes (<p>) de cette page.
Ce sélecteur garantit que les modifications n’affectent pas les autres pages de votre site.
Pour information
Sachez que chaque page ELEMENTOR possède une classe unique d’identification.
Ci dessous il s’agit d’une page du site web « Papaddle » possédant la classe commune single et possédant la classe unique elementor-page-240.
