Selettore discendente

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 2 di 43.

Il primo selettore è il selettore di discendenti. Lo usiamo quando vogliamo applicare uno stile agli elementi che si trovano all'interno di un altro elemento, anche se sono annidati in profondità. Per esempio, ci sono due paragrafi all'interno di un contenitore.

<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>

Ora usiamo un selettore discendente per applicare uno stile a tutti i paragrafi all'interno del div:

.container p {
    color: blue;
}

Tutti i paragrafi all'interno del div .container diventeranno blu, anche quello annidato nell'elemento section.

Sfida

Facile

Crea una regola CSS che selezioni tutti gli elementi di elenco (<li>) discendenti di un elemento con la classe "navigation" e ne cambi il colore del testo in viola.

Provalo tu

<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>