Guida CSS interattiva: Selettore di classe

Q: Come si seleziona una classe in CSS?

Scrivi un punto seguito dal nome della classe: .card { ... } dà stile a tutti gli elementi con class="card". Il punto c'è solo nel CSS; l'attributo HTML non ha il punto.

Q: Come do due classi a un elemento?

Separa i nomi con uno spazio in un solo attributo: class="btn primary". Scrivere class due volte su un elemento non funziona; il browser tiene solo il primo attributo.

Q: Come seleziono un elemento che ha due classi?

Concatena i selettori di classe senza spazio: .btn.primary corrisponde agli elementi che hanno entrambe le classi. Con uno spazio, .btn .primary indica un elemento .primary dentro un elemento .btn.

Il selettore di classe

Un selettore di classe è un punto seguito dal nome di una classe. Dà stile a ogni elemento il cui attributo class contiene quel nome, qualunque sia il tipo di elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Il punto compare solo nel CSS. In HTML l'attributo è class="badge", senza punto. I nomi delle classi distinguono maiuscole e minuscole: .Badge non corrisponde a class="badge".

Più classi su un elemento

Un elemento può avere quante classi vuoi, separate da spazi. Ognuna porta le sue regole, ed è così che costruisci varianti a partire da piccoli pezzi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, senza spazio, corrisponde agli elementi che hanno entrambe le classi. L'ultimo span ha danger ma non btn, quindi la regola concatenata lo salta.

Varianti del selettore di classe

Selettore	Corrisponde a
`.note`	Qualsiasi elemento con classe `note`
`p.note`	Solo gli elementi `<p>` con classe `note`
`.btn.primary`	Elementi con sia `btn` sia `primary`
`.card .title`	Un `.title` ovunque dentro un `.card`
`.card > .title`	Un `.title` il cui genitore è un `.card`
`.a, .b`	Elementi con `a` oppure `b`

La differenza tra spazio e nessuno spazio è spiegata, insieme ad altri combinatori, nella pagina sui selettori CSS.

Il selettore ID

Un selettore ID è un cancelletto seguito dall'id: #site-header dà stile all'elemento con id="site-header". Un id deve essere unico nella pagina, quindi un selettore ID colpisce esattamente un elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Gli id non servono solo allo stile: href="#details" fa scorrere fino all'elemento, <label for="email"> punta all'id di un input, e JavaScript lo trova con document.getElementById('details'). È questo il motivo abituale per dare un id a un elemento; per lo stile, una classe è lo strumento migliore.

Class o ID

	Classe `.name`	ID `#name`
Per pagina	Molti elementi	Un elemento
Per elemento	Diverse, separate da spazi	Uno
Specificità	(0,1,0)	(1,0,0)
Destinazione di un link (`#name` in un URL)	No	Sì
Ideale per	Stile	Ancore, label, agganci per JavaScript

La differenza di specificità è il motivo pratico per dare stile con le classi. Un ID batte qualsiasi numero di classi, quindi una regola scritta con un ID si può sovrascrivere solo con un altro ID, uno stile inline o !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Aggiungere e togliere classi con JavaScript

Le classi sono il modo normale con cui JavaScript cambia l'aspetto di qualcosa: il CSS definisce gli stati, lo script si limita a passare dall'uno all'altro.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList ha anche add, remove, contains e replace. Evita di assegnare direttamente className: sostituisce tutte le classi che l'elemento aveva.

Dare un nome alle classi

Lettere, cifre, trattini e underscore sono sicuri: card, card-title, card__title, is-open.
Non far iniziare un selettore con una cifra o con un trattino seguito da una cifra. .2col non è CSS valido. Inizia con una lettera (.cols-2) o fai l'escape della cifra (.\32 col).
Scegli il nome in base allo scopo, non all'aspetto: .error sopravvive a un restyling, .red-text no.
Una convenzione per i nomi aiuta nei progetti più grandi. BEM scrive block__element--modifier, per esempio .card__title--large.

Errori comuni

Mettere il punto nell'HTML. class=".badge" non corrisponde mai a .badge.
Due attributi class. <p class="a" class="b"> tiene solo a. Usa class="a b".
Uno spazio quando intendevi entrambe le classi. .btn .primary cerca un elemento annidato; .btn.primary è lo stesso elemento.
Riusare un id. Gli id duplicati rompono getElementById, i link alle ancore e le associazioni delle label, anche se il CSS sembra funzionare.
Dare stile a tutto con gli id. La loro specificità rende faticose le sovrascritture successive; usa le classi.

Domande frequenti

Come si seleziona una classe in CSS?

Scrivi un punto seguito dal nome della classe: .card { ... } dà stile a tutti gli elementi con class="card". Il punto c'è solo nel CSS; l'attributo HTML non ha il punto.

Che differenza c'è tra una classe e un id in CSS?

Una classe si può usare su un numero qualsiasi di elementi e un elemento può averne diverse; un id deve essere unico nella pagina e un elemento ne ha al massimo uno. In CSS, #id ha una specificità molto più alta di .class, quindi le regole con un ID sono più difficili da sovrascrivere.

Come do due classi a un elemento?

Separa i nomi con uno spazio in un solo attributo: class="btn primary". Scrivere class due volte su un elemento non funziona; il browser tiene solo il primo attributo.

Come seleziono un elemento che ha due classi?

Concatena i selettori di classe senza spazio: .btn.primary corrisponde agli elementi che hanno entrambe le classi. Con uno spazio, .btn .primary indica un elemento .primary dentro un elemento .btn.

Il nome di una classe CSS può iniziare con un numero?

In HTML sì, ma un selettore non può iniziare con una cifra senza escape, quindi .1col non è CSS valido. Fai l'escape della cifra (.\31 col) o, meglio ancora, fai iniziare i nomi delle classi con una lettera.

Concetti correlati