Selettori

Selettore universale

* {
    background-color: tomato;
}

/* seleziono tutti gli elementi all'interno del tag article */
article * {
    background-color: tomato;
}

Nota:
l selettore universale seleziona tutti gli elementi.

È possibile selezione tutti gli elementi all’interno di uno specifico tag.

Selettore di tipo (o di elementi)

p {
  background-color: tomato;
}

Nota:
il selettore di tipo seleziona tutti i tag con il nome del tag specificato.

Selettore di classe

.content {
  background-color: tomato;
}

Nota:
il selettore di classe seleziona tutti gli elementi con una classe specifica assegnata.

La classe viene dichiarato utilizzando un punto (.) seguito del nome , mentre nell’elemento viene utilizzato l’attributo class per l’assegnazione.

Esempio:
<div class="content">...</div>

Nello stesso documento, può essere usato più di una volta.

Attenzione: i nomi delle classi devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti o caratteri speciali. Il trattino (-) o l’underscore (_) possono essere utilizzati. Il nome è case sensitive.

Selettore di id

#content {
  background-color: tomato;
}

Nota:
Il selettore di id si utilizza per identificare in modo univoco un elemento all’interno della pagina.

Viene definito utilizzando il simbolo “#”, mentre nell’elemento viene utilizzato l’attributo id per l’assegnazione.

Esempio:
<div id="content">...</div>

Attenzione: nello stesso documento, può essere usato una sola volta. Inoltre, i nomi degli id devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti o caratteri speciali. Il trattino (-) o l’underscore (_) possono essere utilizzati. Il nome è case sensitive.