Comment sélectionner récursivement tous les éléments enfants en utilisant CSS ?

CSS (ou Cascading Style Sheets) est utilisé pour rendre et concevoir des pages Web. Il n'est pas utilisé seul, mais plutôt avec HTML ou XML pour définir l'apparence et la mise en page d'une page Web. CSS aide les développeurs à styliser tous les éléments HTML, y compris les titres, les paragraphes, le texte, les images, les tableaux, etc. Non seulement cela, il précise également comment ils s'affichent sur différents écrans, imprimables ou autres types de supports. Il peut également être utilisé pour créer des conceptions Web réactives pour différentes tailles d'écran et différents appareils.

CSS joue un rôle important dans le développement Web car il est largement pris en charge par tous les principaux navigateurs Web, permettant aux développeurs de créer d'excellentes interfaces utilisateur (UI) et des applications Web dynamiques qui engagent les utilisateurs et améliorent leur expérience globale. La sélection d'éléments est l'une des tâches les plus courantes lors du style d'éléments HTML avec CSS. Vous remarquerez que dans certains cas, nous pouvons souhaiter sélectionner tous les éléments enfants d'un élément, y compris leurs enfants imbriqués. Dans cet article, nous verrons comment sélectionner tous ces éléments enfants de manière récursive à l'aide de CSS.

Que sont les sélecteurs CSS ?

Les sélecteurs CSS sont un modèle permettant de sélectionner et de positionner des éléments HTML à des fins de style ou d'autres opérations. Les sélecteurs sélectionnent des éléments en fonction d'attributs tels que la classe, l'identifiant ou le type. La syntaxe d'utilisation des sélecteurs CSS est la suivante :

Grammaire

element > element {
   //CSS styles go here
}

Qu'est-ce qu'un sélecteur d'enfant en CSS ?

Un sélecteur d'enfant en CSS est un combinateur qui sélectionne les éléments enfants directs d'un élément parent. Il est défini à l'aide du symbole ">". Il sélectionne également les éléments enfants directs de l'élément parent spécifié.

Grammaire

.parent > li {
   //CSS styles go here
}

La syntaxe est constituée du symbole ">", qui cible uniquement les éléments enfants directs de l'élément "main-list", dans ce cas "li". Par conséquent, la règle CSS définie ci-dessus sélectionne uniquement les listes « List Item 1 » et « List Item 2 », mais pas la liste « List 1 » imbriquée dans un élément ul imbriqué.

Les sélecteurs d'enfants sont utiles lorsque vous devez appliquer des styles à des éléments enfants spécifiques d'un élément parent sans affecter leurs éléments enfants subordonnés ou imbriqués. Les sélecteurs enfants fournissent également un moyen plus spécifique de localiser des éléments dans l'arborescence du document et peuvent aider à éviter les conflits avec d'autres règles CSS pouvant s'appliquer à des éléments similaires.

Sélectionnez de manière récursive tous les éléments enfants en CSS

Parfois, il peut y avoir une situation où nous devons sélectionner tous les éléments enfants, nous pouvons utiliser des sélecteurs CSS pour sélectionner des éléments à l'aide de l'opérateur (*). La syntaxe de sélection de tous les éléments enfants d'un élément est définie à l'aide de l'opérateur ">". Par exemple, la règle CSS suivante sélectionne tous les enfants directs de l'élément « parent ».

Grammaire

.main-list > * {
   //CSS styles go here
}

La syntaxe ci-dessus sélectionne tous les éléments enfants de l'élément "main-list", y compris leurs éléments enfants imbriqués. Vous remarquerez que l'espace entre l'élément "main-list" et le sélecteur générique (*) indique que nous voulons sélectionner tous les descendants de l'élément "parent", pas seulement les enfants directs.

Vous pouvez également utiliser la pseudo-classe « :not() » pour exclure certains éléments de la sélection. Par exemple, la règle CSS suivante sélectionne de manière récursive tous les éléments enfants de l'élément "main-list", à l'exception de l'élément "list-not" -

Exemple 1 : montre un exemple de sélection de tous les éléments enfants

Dans l'exemple ci-dessous, nous définissons une classe .parent > div qui applique des styles à tout élément qui est un enfant direct d'un élément de classe "parent". Dans ce cas, le seul élément qui remplit cette condition est l’élément de type « main-list ».

Le style spécifié dans le code CSS définit la couleur d'arrière-plan de l'élément

<!DOCTYPE html>
<html>
   <head>
      <style>
         .parent > div {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <div class="main-list">
            <li>List item 1</li>
            <li>List item 2</li>
         </div>
         <li>List item 3</li>
         <li>List item 4</li>
      </div>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.parent,
         div.parent > * {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <li>List item 1</li>
         <li>List item 2</li>
         <span>
            <li>List item 3</li>
         </span>
      </div>
      <li>List item 4</li>
      <li>List item 5</li>
   </body>
</html>