Selettori: elemento, .classe, #id, [attributo]

I selettori sono il meccanismo con cui indichi al CSS a chi vuoi applicare determinate regole di stile. Immagina i selettori come l’indirizzo di spedizione per le tue regole grafiche.

In questa lezione esploreremo le quattro categorie principali di selettori.

1. Selettori di Elemento (o Tag)

Mirano a tutti i tag HTML di un certo tipo presenti nella pagina.

/* Seleziona TUTTI i paragrafi della pagina */
p {
  line-height: 1.6;
  color: #333;
}

/* Seleziona TUTTI i titoli h2 */
h2 {
  font-family: Arial, sans-serif;
}

Quando usarli? Sono ottimi per definire lo stile base generale (es. il font-family sul tag body, o le dimensioni di base dei titoli h1, h2), ma diventano troppo generici per layout complessi.

2. Selettori di Classe (.)

Sono il tuo strumento principale. Le classi sono attributi HTML (class="...") che puoi assegnare a qualsiasi elemento per riutilizzare stili specifici. In CSS si indicano con un punto (.) prima del nome.

<button class="btn-primary">Invia</button>
<button class="btn-primary">Accetta</button>
<a href="#" class="btn-primary">Scopri di più</a>

/* Seleziona qualsiasi elemento che ha class="btn-primary" */
.btn-primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

Perché sono lo strumento principale? Possono essere applicate a tag diversi (un bottone o un link), sono riutilizzabili e un elemento HTML può avere più classi separate da spazio (es. class="btn btn-primary large").

3. Selettori di ID (#)

Gli ID sono attributi HTML (id="...") che devono essere unici in tutta la pagina. Non puoi avere due elementi con lo stesso ID. In CSS si indicano con l’hash (#).

<nav id="menu-principale">...</nav>

/* Seleziona l'unico elemento con id="menu-principale" */
#menu-principale {
  background-color: darkblue;
}

Quando usarli? Nel CSS moderno, gli ID non si usano quasi mai per definire stili. Essendo univoci, non sono riutilizzabili. Inoltre, hanno una specificità molto alta che rende difficile sovrascriverli (lo vedremo nella lezione sulla Specificità). Gli ID si lasciano solitamente a JavaScript o per ancore interne (<a href="#sezione">).

4. Selettori di Attributo ([])

Permettono di selezionare elementi in base alla presenza o al valore di un attributo HTML. Si racchiudono tra parentesi quadre.

/* Seleziona tutti gli input di tipo testo */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

/* Seleziona i link che portano a siti esterni (che iniziano con https) */
a[href^="https://"] {
  color: green;
}

Questi selettori sono utili per formattare moduli (form) o applicare stili legati a stati logici ([disabled], [required]) senza dover aggiungere classi in più.