Découvrez ce qu'est un sélecteur de descendant CSS

La structure d'un document HTML est similaire à celle d'un arbre généalogique. Dans ta famille, tu as tes parents et d'autres qui sont venus avant toi. Ce sont vos ancêtres. Les enfants et ceux qui viennent après vous sur cet arbre sont vos descendants. Le HTML fonctionne de la même manière. Les éléments qui sont à l'intérieur d'autres éléments sont leurs descendants. Par exemple, puisque presque tous les éléments HTML sont à l’intérieur de balises, ils seraient un descendant de cette éléments. Il est important de comprendre cette relation lorsque vous commencez à travailler avec CSS et que vous devez cibler des éléments spécifiques pour appliquer des styles visuels.

Sélecteurs CSS Descendant

Un sélecteur de descendant CSS s'applique aux éléments qui se trouvent dans un autre élément (ou plus précisément, un élément qui est un descendant d'un autre élément). Par exemple, une liste non ordonnée a une balise avec des balises en tant que descendants. Utilisons le code HTML suivant comme exemple:

• c'est un lien

le LI les balises sont les descendants du UL étiquette. le UNE tag est un descendant de tous les deux la LI (descendant enfant) et UL balises (descendant petit-enfant). Si vous pensez y penser en utilisant l'exemple de l'arbre généalogique, le

serait le parent, le
• serait l'enfant de cet élément, et le serait l'enfant du
• et le petit-fils du
  .

  Alors, comment cibleriez-vous des éléments spécifiques dans une page Web à l'aide de ces sélecteurs descendants? Tout d’abord, vous devez définir les sélecteurs descendants en utilisant deux (ou plus) sélecteurs de type séparés par des espaces.

  li a {text-decoration: none; }

  Dans cet exemple, les styles ne s’appliqueraient qu’à un élément link () qui est un descendant d’un élément list-item (

  • ). Tous les autres liens de la page qui ne sont pas des descendants d'un élément de la liste n'obtiendraient pas ce style.

    Une chose importante à retenir est que le nombre de balises entre les balises que vous utilisez peut-être dans votre sélecteur de descendance n'a pas d'importance. Si le deuxième élément est inclus n'importe où dans le premier élément, il sera sélectionné en tant que descendant.

    Si vous souhaitez sélectionner toutes les ancres issues d'éléments ul, vous pouvez écrire:

    ul a {text-decoration: none; }

    Désormais, ces styles s'appliqueront à tout lien descendant d'un élément de la liste. Vous pouvez aussi écrire ce sélecteur

    ul li a {text-decoration: none; }

    Il s'agit d'un sélecteur de descendant qui utilise plus de deux sélecteurs de type. Dans ce cas, cela s'appliquerait aux liens qui se trouvent à l'intérieur d'un élément de liste et d'une liste non ordonnée.

    Utilisation de sélecteurs de classe et de sélecteurs d'ID

    Les sélecteurs dont vous descendez ne doivent pas toujours être des descendants de type. Par exemple, imaginons que vous disposiez d'une zone du site (comme une division) avec un attribut ID "billboard". Vous pouvez configurer un sélecteur de descendant en dehors de cet ID:

    #billboard ul {background-color: #ccc; }

    Cela donnerait un style à la liste non ordonnée qui est le descendant d'un élément avec un identifiant de "panneau d'affichage". Vous pouvez faire la même chose pour les valeurs de classe.

    div.billboard ul {background-color: #ccc; }

    Cela suppose que la division a une valeur de classe de "panneau d'affichage". Le CSS ci-dessus serait le style

    élément à l'intérieur de toute division ayant cette valeur de classe.

    Vous pouvez être très dur et bavard avec les sélecteurs de descendants. Par exemple, si vous utilisez Dreamweaver pour écrire votre code HTML, il existe un paramètre lorsque vous ajoutez de nouvelles règles CSS qui créeront automatiquement le sélecteur en fonction de l'emplacement de votre curseur sur cette page. Dreamweaver crée un sélecteur de descendant extrêmement prolixe et prolixe. Cette spécificité n’est pas nécessaire pour que votre CSS fonctionne. Ce que vous voulez faire est de trouver un équilibre entre un sélecteur de descendant suffisamment spécifique pour pouvoir accéder aux éléments exacts dont vous avez besoin (sans dénommer ceux que vous ne souhaitez pas affecter) sans disposer de règles CSS comportant des sélecteurs excessivement grand.