Un selettore contestuale è un selettore il cui valore cambia a seconda del contesto in cui viene applicato.

Si consideri l'esempio seguente:

La prima regola h1 { color: red } indica che tutti i titoli h1 devono essere in rosso. La seconda regola em { color: red } specifica che anche gli elementi em devono essere in rosso. Questo tipo di selettore contestuale viene detto anche selettore di discendente (o descendant selector).

In questo modo tuttavia il codice seguente non produrrebbe nessuna "enfasi" poiché non si riuscirebbe a distinguere l'elemento <em> (in rosso su un titolo rosso):

E' qui che interviene l'ultima regola h1 em { color: blue }  che definisce appunto un selettore contestuale. Questa regola indica che gli elementi em contenuti all'interno di elementi h1 devono essere formattati in blu (cioè in modo diverso rispetto agli altri elementi em della pagina).

Come ulteriore esempio, la seguente dichiarazione di stile elimina la sottolineatura a tutti i link contenuti all'interno in un elemento di lista li (ma non ai link esterni alle liste):

L'esempio qui sopra seleziona tutte le a che si trovano in una lista li, come mostra l'esempio qui sotto:

Ci sono tuttavia dei casi in cui si desidera selezionare solo gli elementi che sono direttamente contenuti in un altro (si dice anche che sono elementi figli o child di un altro elemento). In questo caso si può usare un altro selettore contestuale detto child selector:

Si noti il simbolo > fra i due tag nella regola di selezione. Qui invece vediamo l'applicazione del precedente selettore (si noti la diversa visualizzazione del secondo a rispetto al caso precedente):

Infatti, nell'esempio qui sopra, <a> non è figlio diretto di <li>, poiché è a sua volta contenuto in un elemento <strong>.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania