Guida CSS interattiva: Selettori

Q: Cos'è un selettore CSS?

La parte di una regola CSS prima della { che dice a quali elementi si applicano le dichiarazioni. In p.note { color: blue; }, il selettore p.note seleziona ogni con la classe note.

Q: Qual è la differenza tra uno spazio e > in un selettore CSS?

Lo spazio è il combinatore discendente: nav a seleziona ogni link ovunque dentro un nav, a qualsiasi profondità. > è il combinatore figlio: nav > a seleziona solo i link il cui genitore diretto è il nav.

Q: Cosa significa + in CSS?

è il combinatore del fratello adiacente. h2 + p seleziona un che viene subito dopo un con lo stesso genitore. ~ è meno restrittivo: h2 ~ p seleziona ogni fratello successivo.

Q: Come seleziono gli elementi in base a un attributo in CSS?

Metti l'attributo tra parentesi quadre: [disabled] seleziona gli elementi che lo hanno, [type="email"] un valore esatto, [href^="https"] un valore che inizia con una stringa, [href$=".pdf"] uno che finisce con essa, e [class*="btn"] uno che la contiene.

Q: CSS può selezionare un elemento genitore?

Sì, con la pseudo-classe :has(), supportata dalle versioni attuali di Chrome, Firefox e Safari. li:has(> a.active) seleziona gli elementi della lista che contengono direttamente un link attivo.

Cos'è un selettore CSS

Un selettore è la parte di una regola prima delle parentesi graffe. Decide a quali elementi si applicano le dichiarazioni.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

I cinque selettori di base coprono la maggior parte dei fogli di stile reali:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

I tipi di selettore a colpo d'occhio

Selettore	Esempio	Seleziona
Universale	`*`	Ogni elemento
Tipo	`p`	Ogni `<p>`
Classe	`.tip`	Gli elementi con `class="tip"` (tra le altre)
ID	`#main-title`	L'elemento con `id="main-title"`
Attributo	`[type="email"]`	Gli elementi il cui attributo corrisponde
Pseudo-classe	`a:hover`, `li:first-child`	Gli elementi in uno stato o in una posizione
Pseudo-elemento	`p::first-line`, `.x::before`	Una parte di un elemento
Gruppo	`h1, h2, h3`	Tutto ciò che corrisponde a uno dell'elenco
Composto	`p.tip`	Un `<p>` che ha anche la classe

Classi e ID hanno una pagina tutta loro, selettore di classe CSS. Le pseudo-classi come :nth-child() e :not() sono trattate nella pagina sulle pseudo-classi.

Combinatori: discendente contro figlio

Un combinatore unisce due selettori in base alla loro relazione nell'albero HTML. Ce ne sono quattro.

Combinatore	Sintassi	Seleziona `B` quando
Discendente	`A B` (spazio)	B si trova ovunque dentro A
Figlio	`A > B`	Il genitore di B è A
Fratello adiacente	`A + B`	B viene subito dopo A, stesso genitore
Fratello generale	`A ~ B`	B viene da qualche parte dopo A, stesso genitore

Lo spazio e > sono la coppia che si confonde di più. Il selettore discendente arriva a qualsiasi profondità; il selettore figlio si ferma a un livello:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Combinatori tra fratelli: + e ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

I fratelli guardano solo in avanti. Non esiste un combinatore del "fratello precedente", anche se :has() può esprimerlo: h2:has(+ p) seleziona un h2 seguito direttamente da un p.

Selettori di attributo

Le parentesi quadre selezionano in base agli attributi e ai loro valori:

Selettore	Seleziona
`[disabled]`	Ha l'attributo, con qualsiasi valore
`[type="email"]`	Il valore è esattamente `email`
`[href^="https"]`	Il valore inizia con `https`
`[href$=".pdf"]`	Il valore finisce con `.pdf`
`[class*="icon"]`	Il valore contiene `icon` in qualsiasi punto
`[lang\|="en"]`	Il valore è `en` o inizia con `en-`
`[data-state="open" i]`	Corrispondenza esatta, senza distinguere maiuscole e minuscole

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

I selettori di attributo sugli attributi data-* sono un modo pulito per dare stile a uno stato impostato da JavaScript, senza inventare nomi di classe.

Prova qualsiasi selettore

Scrivi un selettore nel campo. Ogni elemento che seleziona riceve un contorno ambra, e il conteggio compare sotto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Prova #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Composto contro discendente: lo spazio conta

p.note e p .note differiscono per uno spazio e significano cose diverse.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Come i browser leggono i selettori

Quando più regole selezionano lo stesso elemento e impostano la stessa proprietà, vince il selettore più specifico, e a parità vince quello scritto dopo. Un ID pesa più di qualsiasi numero di classi, e una classe più di qualsiasi numero di selettori di tipo; la pagina su !important ha la tabella completa della specificità.

Un gruppo ha un'insidia: se un selettore qualsiasi in un semplice elenco non è valido, l'intera regola viene scartata. In a, b:unknown { } nemmeno i link ricevono lo stile. Racchiudere l'elenco in :is() lo rende tollerante, quindi :is(a, b:unknown) dà comunque stile ai link.

Errori comuni

Dimenticare il punto o il cancelletto. tip { } seleziona un elemento <tip>, non class="tip". Scrivi .tip.
Uno spazio in un selettore composto. p .note non è p.note.
Aspettarsi che > arrivi ai nipoti. Usa uno spazio per qualsiasi profondità.
Un errore di battitura rompe un intero gruppo. In h1, h2:hovr, h3 niente riceve lo stile.
Selettori troppo lunghi. body div.wrapper ul li a è lento da leggere e difficile da sovrascrivere. Di solito basta una sola classe.

Domande frequenti

Cos'è un selettore CSS?

La parte di una regola CSS prima della { che dice a quali elementi si applicano le dichiarazioni. In p.note { color: blue; }, il selettore p.note seleziona ogni <p> con la classe note.

Qual è la differenza tra uno spazio e > in un selettore CSS?

Lo spazio è il combinatore discendente: nav a seleziona ogni link ovunque dentro un nav, a qualsiasi profondità. > è il combinatore figlio: nav > a seleziona solo i link il cui genitore diretto è il nav.

Cosa significa + in CSS?

+ è il combinatore del fratello adiacente. h2 + p seleziona un <p> che viene subito dopo un <h2> con lo stesso genitore. ~ è meno restrittivo: h2 ~ p seleziona ogni fratello <p> successivo.

Come seleziono gli elementi in base a un attributo in CSS?

Metti l'attributo tra parentesi quadre: [disabled] seleziona gli elementi che lo hanno, [type="email"] un valore esatto, [href^="https"] un valore che inizia con una stringa, [href$=".pdf"] uno che finisce con essa, e [class*="btn"] uno che la contiene.

CSS può selezionare un elemento genitore?

Sì, con la pseudo-classe :has(), supportata dalle versioni attuali di Chrome, Firefox e Safari. li:has(> a.active) seleziona gli elementi della lista che contengono direttamente un link attivo.

Concetti correlati