Selettori

Il selettore * identifica ogni elemento del documento, i selettori di tipo applicano uno stile a tutti i tag dello stesso tipo mentre i selettori di classe applicano lo stesso stile a parti di codice HTML.

Si può creare una classe applicabile a qualsiasi tag omettendo il tipo, .rosso { color: #FF0000; }

Possiamo definire una sottoclasse dipendente dalla prima, p.rosso.grassetto { font-weight: bold; }

Possiamo definire una classe tramite ID, ogni elemento può avere un solo ID e contemporaneamente non possono esistere due diversi elementi con il medesimo ID.

I selettori di relazione consentono di individuare uno o più elementi sulla base delle relazioni che esistono tra loro all’interno dell’albero DOM.

• discendenti, permette di identificare un elemento discendente di un altro esempio #intro p span { color: #FF0000; } vengono selezionati tutti gli elementi span all’interno dei paragrafi con ID intro;
• figli, come il precedente solo che si ferma a quegli elementi direttamente discendenti dal contenitore, esempio
  

  … #spesa > li { color: #FF0000; } … <ul id = “spesa”> <li>pasta</li> <li>frutta</li> <li>mele</li> <li>arance</li> </ul> </li> </ul>

  vengono identificate pasta e frutta ma non mele e arance che sono “nipoti”;

• adiacenti, il selettore (+) consente di identificare gli elementi direttamente adiacenti
  il primo paragrafo adiacente a h1 viene scritto in rosso, il secondo paragrafo con il colore standard;

  … h1 + p { color: #FF0000; } … <h1>Titolo</h1> <p>scritta in rosso</p> … <p>colore standard</p>

• successori, il selettore (~) consente di identificare tutti i fratelli che succedono ad un dato elemento.
• attributo
  • ci consente di selezionare un elemento identificandolo in base all’attributo, esempio a.sponsor[title] { color: #FF0000; } lo stile si applica solo ai link di classe sponsor e attributo title;
  • i selettori (~=) e (|=) consentono di selezionare un elemento che contiene la stringa o inizia con la stringa, esempi a [ title ~= “web” ] o a [ title |= “web” ];