Sélecteur de descendant

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 2 sur 43.

Le premier sélecteur est le sélecteur de descendant. Nous l'utilisons lorsque nous voulons styliser des éléments qui se trouvent à l'intérieur d'un autre élément, même s'ils sont profondément imbriqués. Par exemple, il y a deux paragraphes à l'intérieur d'un conteneur.

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

Maintenant, utilisons un sélecteur de descendant pour styliser tous les paragraphes à l'intérieur du div :

.container p {
    color: blue;
}

Tous les paragraphes à l'intérieur de la div .container deviendront bleus — même celui imbriqué à l'intérieur de l'élément section.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS qui sélectionne tous les éléments de liste (<li>) qui sont des descendants d'un élément avec la classe "navigation" et change leur couleur de texte en purple.

Aide-mémoire

Le sélecteur de descendant stylise les éléments qui se trouvent à l'intérieur d'un autre élément, même s'ils sont profondément imbriqués.

Syntaxe : Utilisez un espace entre les sélecteurs parent et descendant :

.container p {
    color: blue;
}

Ceci sélectionne tous les éléments <p> à l'intérieur de n'importe quel élément ayant la classe container, quel que soit le niveau d'imbrication.

Essayez vous-même

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.