Selettore discendente
Lezione 8 di 15 del corso Selettori CSS di Coddy.
Nell'argomento precedente abbiamo imparato il combinatore figlio, che seleziona i figli diretti di un elemento. Ora esploriamo i selettori discendenti, indicati da uno spazio vuoto. Un selettore discendente permette di selezionare gli elementi annidati all'interno di un altro elemento a qualsiasi livello, non solo i figli diretti.
Sintassi
selector1 selector2 {
/* dichiarazioni delle proprietà */
}Per esempio,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>La regola CSS qui sopra applicherà a entrambi i paragrafi il colore rosso e una dimensione del carattere di 2em.
Che relazione c'è con i selettori figli?
Un selettore discendente è più generico di un selettore figlio. Ciò significa che un selettore discendente corrisponderà a tutti gli elementi discendenti di un elemento specificato, mentre un selettore figlio corrisponderà solo agli elementi discendenti diretti di un elemento specificato.
Per esempio, il selettore div p corrisponderà a tutti gli elementi p discendenti di un elemento div, compresi gli elementi p annidati all'interno di altri elementi p. Il selettore div > p corrisponderà solo agli elementi p discendenti diretti di un elemento div.
Sfida
FacileBasandoci sull'esercizio precedente, usiamo la stessa struttura HTML. Scrivi una regola CSS usando il selettore discendente per applicare uno stile a tutti i paragrafi all'interno dell'elemento .list, indipendentemente dal livello di annidamento. Assegna loro un nuovo colore, una nuova dimensione e un nuovo font a tua scelta
Provalo tu
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Tutte le lezioni di Selettori CSS
3Selettori combinatori
Selettore figlioSelettore discendenteSelettore fratello adiacenteSelettore fratello generaleEsercitati da solo: Playground Web