Selettori CSS

Codegrind Team•Jul 22 2023

I selettori CSS vengono utilizzati per selezionare gli elementi HTML che si desidera stilizzare.

Possiamo dividere i selettori CSS in cinque categorie:

Selettori semplici (selezionano elementi in base al nome, id, classe)
Selettori di combinazione (selezionano elementi in base a una relazione specifica tra di loro)
Selettori di pseudo-classe (selezionano elementi in base a uno stato specifico)
Selettori di pseudo-elementi (selezionano e stilizzano una parte di un elemento)
Selettori di attributo (selezionano elementi in base a un attributo o valore di attributo)

In questa pagina vedremo i selettori CSS più basilari, per poi approfondire più avanti.

Il Selettore di Elementi

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

Qui, tutti gli elementi <p> sulla pagina saranno centrati, con un colore del testo rosso:

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

Il selettore di ID utilizza l’attributo id di un elemento HTML per selezionare un elemento specifico.

L’id di un elemento è univoco all’interno di una pagina, quindi il selettore di ID è utilizzato per selezionare un elemento unico!

Per selezionare un elemento con un ID specifico, scrivi un carattere cancelletto (#), seguito dall’ID dell’elemento.

Esempio La regola CSS qui sotto verrà applicata all’elemento HTML con id=“para1”:

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

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

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

In questo esempio tutti gli elementi HTML con class=“center” saranno rossi e centrati:

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

Puoi anche specificare che solo elementi HTML specifici debbano essere influenzati da una classe.

In questo esempio solo gli elementi <p> con class=“center” saranno rossi e centrati:

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

Gli elementi HTML possono anche fare riferimento a più di una classe.

In questo esempio l’elemento <p> sarà stilizzato in base alle classi “center” e “large”:

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

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

La regola CSS qui sotto influenzerà tutti gli elementi HTML sulla pagina:

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

Il selettore di gruppo seleziona tutti gli elementi HTML con le stesse definizioni di stile.

Nel seguente codice CSS gli elementi h1, h2 e p hanno le stesse definizioni di stile:

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

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

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

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

Per raggruppare i selettori, separa ciascun selettore con una virgola.

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