Selettore figlio

Lezione 7 di 15 del corso Selettori CSS di Coddy.

Un selettore figlio è un tipo di selettore CSS che seleziona tutti gli elementi che sono figli diretti di un elemento specificato. Il selettore figlio è indicato da un segno di maggiore (>) tra due selettori.

Esempio:

Considera la seguente struttura HTML:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Per selezionare il paragrafo figlio diretto, useresti il combinatore figlio nel modo seguente:

.parent > p {
    color: blue;
}

In questo esempio, solo il paragrafo figlio diretto diventerà blu, non quello annidato all'interno del <div> interno.

I selettori figli possono anche essere usati per evitare di applicare stili agli elementi che non sono figli diretti di un elemento specificato. Ad esempio, potresti usare un selettore figlio per impostare in rosso tutti i link che sono figli diretti di un elemento p.

Sfida

Facile

Data la seguente struttura HTML, crea una regola CSS usando il combinatore figlio per assegnare uno sfondo giallo agli elementi dell’elenco direttamente contenuti nell’elemento <ul>.

Provalo tu

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

Tutte le lezioni di Selettori CSS

1Introduzione ai selettori CSS

Scopo dei selettori CSS Perché sono importanti?

4Selettori di attributo

Introduzione ai selettori di attributo Presenza e valori esatti Selettori di valori di attributo Selettori di valori di attributo II Selettori di valori di attributo III

2Selettori semplici

Selettori di tipo Selettori di classe Selettori ID Selettori universali

3Selettori combinatori

Selettore figlioSelettore discendente Selettore fratello adiacente Selettore fratello generale

Esercitati da solo: Playground Web