Selettore CSS

Selettore CSS

I selettori CSS vengono utilizzati per “trovare” (o selezionare) gli elementi HTML da applicare uno stile.

Possiamo dividere i selettori CSS in cinque categorie:

Questa pagina spiega i selettori CSS di base.

Selettore di elemento CSS

Il selettore di elemento seleziona gli elementi HTML in base al nome dell'elemento.

Esempio

In questo esempio, tutti gli elementi <p> della pagina saranno allineati al centro e avranno il colore del testo rosso:

p {
  text-align: center;
  color: red;
}

Prova tu stesso

Selettore id CSS

Il selettore id utilizza l'attributo id dell'elemento HTML per selezionare un elemento specifico.

L'id degli elementi è unico nella pagina, quindi il selettore id viene utilizzato per selezionare un elemento unico!

Per selezionare un elemento con un id specifico, scrivi un cancelletto (#) seguito dall'id dell'elemento.

Esempio

Questa regola CSS verrà applicata all'elemento HTML con id="para1":

#para1 {
  text-align: center;
  color: red;
}

Prova tu stesso

Attenzione:Il nome dell'id non può iniziare con un numero.

Selettore di classe CSS

Il selettore di classe seleziona gli elementi HTML con un attributo class specifico.

Per selezionare un elemento con una classe specifica, scrivi un punto (.) seguito dal nome della classe.

Esempio

In questo esempio, tutti gli elementi HTML con class="center" saranno rossi e allineati al centro:

.center {
  text-align: center;
  color: red;
}

Prova tu stesso

Puoi anche specificare che solo determinati elementi HTML siano influenzati dalla classe.

Esempio

In questo esempio, solo gli elementi <p> con class="center" saranno allineati al centro:

p.center {
  text-align: center;
  color: red;
}

Prova tu stesso

Gli elementi HTML possono anche fare riferimento a più classi.

Esempio

In questo esempio, l'elemento <p> viene configurato di stile in base a class="center" e class="large":

<p class="center large">Questo paragrafo fa riferimento a due classi.</p>

Prova tu stesso

Attenzione:Il nome della classe non può iniziare con un numero!

Selettore universale CSS

Il selettore universale (* ) seleziona tutti gli elementi HTML della pagina.

Esempio

Le seguenti regole CSS influenzeranno ogni elemento HTML della pagina:

* {
  text-align: center;
  color: blue;
}

Prova tu stesso

Selettore di raggruppamento CSS

I selettori di raggruppamento selezionano tutti gli elementi HTML con la stessa definizione di stile.

Vedi il seguente codice CSS (h1, h2 e p elementi hanno la stessa definizione di stile):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

È meglio raggruppare i selettori per ridurre al minimo il codice.

Per raggruppare i selettori, usa la virgola per separare ogni selettore.

Esempio

In questo esempio, raggruppiamo i selettori elencati di seguito:

h1, h2, p {
  text-align: center;
  color: red;
}

Prova tu stesso

Tutti i selettori CSS semplici

Selettore Esempio Descrizione dell'esempio
.class .intro Seleziona tutti gli elementi con class="intro".
#id #firstname Seleziona l'elemento con id="firstname".
* * Seleziona tutti gli elementi.
element p Seleziona tutti gli elementi <p>.
element,element,.. div, p Seleziona tutti gli elementi <div> e tutti gli elementi <p>.

Letture correlate

Libri extra:Selettore di elemento CSS

Libri extra:Gruppo di selettori CSS

Libri extra:Dettagli del selettore di classe CSS

Libri extra:Dettagli del selettore ID CSS

Libri extra:Dettagli del selettore di attributo CSS

Libri extra:Selettore discendente CSS

Libri extra:Selettore di elemento figlio CSS

Libri extra:Selettore di fratello successivo CSS