Selettore derivato CSS

Selettore derivato

Definendo lo stile in base alla posizione dell'elemento nel contesto, puoi rendere il markup più semplice.

In CSS1, il selettore utilizzato per applicare le regole in questo modo è chiamato selettore contestuale (contextual selectors), poiché si basa sul contesto per applicare o evitare una regola. In CSS2, sono chiamati selettori derivati, ma a prescindere dal nome, il loro funzionamento è lo stesso.

Il selettore derivato ti permette di determinare lo stile di un tag in base al contesto del documento. Utilizzando in modo ragionevole i selettori derivati, possiamo rendere il codice HTML più ordinato.

Ad esempio, se desideri che l'elemento strong nella lista sia in corsivo invece del solito grassetto, puoi definire un selettore derivato in questo modo:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Attenzione al contesto relativo del codice blu etichettato come <strong>:

<p><strong>Sono in grassetto, non in corsivo, perché non sono nella lista, quindi questa regola non mi riguarda</strong></p>
<ol>
<li><strong>Sono in corsivo. Questo è perché l'elemento strong si trova all'interno dell'elemento li.</strong></li>
<li>Sono in carattere normale.</li>
</ol>

Nell'esempio precedente, solo lo stile dell'elemento strong all'interno dell'elemento li è in corsivo, non è necessario definire una classe o un id speciale per l'elemento strong, il codice è più semplice.

Riguardiamo le seguenti regole CSS:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Di seguito è riportato l'HTML influenzato:

<p>La parola fortemente enfatizzata in questo paragrafo è<strong>rosso</strong>.</p>
<h2>Questo sottotitolo è anche rosso.</h2>
<h2>La parola fortemente enfatizzata in questo sottotitolo è<strong>blue</strong>.</h2>

Contenuti correlati

Se hai bisogno di approfondire le conoscenze sui selettori derivati, leggi il seguente contenuto nei tutorial avanzati di CodeW3C.com: