Maîtrisez les Sélecteurs Parent-Enfant Directs en CSS

Sélecteur parent-enfant direct
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 2
Revoir le teaser Je m'abonne
1,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
1,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

À l'issue de cette vidéo, les apprenants seront capables de :
- Différencier les sélecteurs parent-enfant simples et directs.
- Utiliser le sélecteur > pour cibler des éléments enfants directs.
- Optimiser leur code CSS en réduisant l'usage des identifiants et classes.

Découvrez comment utiliser les sélecteurs parent-enfant direct en CSS pour cibler précisément les éléments souhaités dans le DOM.

Dans cette leçon, nous allons approfondir l'utilisation des sélecteurs parent-enfant directs en CSS. Nous commencerons par rappeler l'usage des sélecteurs parents-enfants simples, comme le sélecteur article p, qui permet de cibler tous les éléments <p> à l'intérieur d'un élément <article>. Ensuite, nous verrons comment cibler uniquement un enfant direct spécifique en utilisant le signe supérieur (>) entre le parent et l'enfant, par exemple section > h1. Cela nous permettra de sélectionner uniquement les éléments <h1> qui sont des enfants directs de <section> sans inclure les descendants plus profonds. Nous aborderons également les avantages de cette méthode pour éviter l'alourdissement du code avec trop d'identifiants et classes spécifiques.

Voir plus
Questions réponses
Qu'est-ce qu'un sélecteur parent-enfant direct en CSS ?
Un sélecteur parent-enfant direct en CSS utilise le symbole '>' pour cibler uniquement les enfants directs d'un élément parent, excluant ainsi les descendants plus éloignés.
Pourquoi est-il préférable d'utiliser des sélecteurs plutôt que des identifiants ?
Utiliser des sélecteurs permet de réduire la complexité et l'alourdissement du code, évitant ainsi la prolifération des identifiants qui peuvent rendre le code difficile à maintenir.
Comment cibler uniquement les enfants directs d'un élément 'section' pour les éléments 'h1' ?
Pour cibler uniquement les enfants directs d'un élément 'section' pour les éléments 'h1', vous devez utiliser le sélecteur 'section > h1' en CSS.
Nous allons à présent rentrer un peu plus dans la subtilité des sélecteurs. Nous allons étudier le sélecteur qui se nomme « parent-enfant direct ». Nous avons déjà vu un sélecteur qui s'appelait « parent-enfant ». Je vous rappelle son utilisation. Par exemple, nous voulons aller sélectionner un élément situé à l'intérieur d'un autre. Nous allons sélectionner par exemple l'élément « p » situé à l'intérieur de « article ». Pour ce faire, nous écrivons « article p » et puis nous appliquons une propriété quelconque. Voici, j'actualise et là, nous avons bien ciblé les éléments « p » situés à l'intérieur d'un article. Donc ça, c'est une première chose que nous avons déjà vue. Si nous voulions aller un tout petit peu plus loin, alors par exemple, je vois qu'ici il y a un article qui possède la classe « conseil ». J'aimerais cibler uniquement ce paragraphe. C'est le même principe, donc on prend « article.conseil » donc « article.conseil p », j'enregistre et cette fois, il y a uniquement les paragraphes situés dans la zone « article » qui porte la classe « conseil » qui sont en rouge. Alors, j'aurais pu simplifier en écrivant simplement « .conseil ». Voilà, et du coup, de toute façon, on a la même chose, c'est exactement pareil. Donc ça, ça s'appelle des sélecteurs « parents-enfants ». Il y a l'enfant, le « p » qui est situé à l'intérieur d'un parent « article » ou bien l'article qui porte la classe « conseil ». C'est une première chose. Alors, nous allons voir à présent quelque chose qui est semblable mais un tout petit peu plus subtil. C'est-à-dire, nous allons voir comment cibler uniquement un enfant et non pas un arrière petit-enfant. Alors, en exemple, je vais prendre « section » et puis je vais aller chercher dans « section H1 ». Puisque nous avons « section » ici avec « contenu », « identité contenue », nous avons un H1 ici et un autre H1 là. Donc là, il y a une génération supplémentaire, la première génération c'est celui-là, ce H1-là. La seconde génération, c'est finalement celui-là puisqu'il est inclus dans une balise article. Voyons ce qui se passe. Et puis H1, tout simplement, je vérifie, c'est bien ça. J'enregistre. On vérifie. Et bien là, tous les H1, comme on pouvait s'y attendre, sont devenus rouges, ce qui est normal. Alors, le sélecteur que nous allons étudier est un sélecteur qui est le suivant. Nous allons mettre un petit signe supérieur entre « section » et « H1 », ce qui fait que ça ne sélectionnera que le H1 immédiatement enfant de section et non pas les petits-enfants. J'enregistre et j'actualise. Voilà. Nous avons maintenant uniquement le premier H1 qui est sélectionné, donc c'est celui-ci. Celui-là est un enfant direct de section, alors que ceux-là, ce sont des petits-enfants. Donc ça, c'est très pratique, parce que du coup, on va pouvoir vraiment maintenant commencer à affiner nos différents sélecteurs pour cibler exactement l'élément que l'on recherche. Alors, évidemment, on aurait pu faire autrement. On aurait pu dire, allez, cet élément H1, on lui donne une petite classe, on lui donne un identifiant et puis ça aurait été lui unique. Mais c'est bien plus subtil, bien plus beau de l'écrire de cette manière, parce que ça évite d'alourdir le code avec de nombreux identifiants qui finissent par vous rendre un petit peu perplexes par rapport à l'ensemble du code et à vous embrouiller, puisqu'il y a de nombreux identifiants. Donc essayez, dans la mesure du possible, de travailler avec ces sélecteurs plus qu'avec identifiants. Je sais personnellement qu'effectivement, c'est beaucoup plus simple parfois d'utiliser des identifiants, mais lorsqu'il y a trop d'identifiants, on finit par s'y perdre. Donc conservez à l'esprit cette possibilité.
1 commentaire
1,0
1 vote
5
4
3
2
1
eve.bertieaux
Il y a 2 years
Commentaire
C'est vraiment dommage que lors de la démonstration HTML et CSS soient mélangés, je ne sais plus à un moment donné si c'est dans l'un ou l'autre, du coup je n'ai pas le résultat attendu
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5