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.


p.rosso { color: #FF0000; }

<p>paragrafo 1</p>
<p classe = “rosso”>paragrafo 2</p>

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.


<h1 id = “titolo”>titolo</h1>

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” ];
Please follow and like us:

Lascia un commento