Selettori

The CSS Podcast - 002: Selectors

Se vuoi che un testo sia più grande e rosso solo se si tratta del primo paragrafo di un articolo, come fai?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Utilizzi un selettore CSS per trovare l'elemento specifico e applicare una regola CSS, come questa.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

Il CSS offre molte opzioni per selezionare gli elementi e applicare regole, da molto semplici a molto complesse, per aiutarti a risolvere situazioni come questa.

Le parti di una regola CSS

Per capire il funzionamento dei selettori e il loro ruolo in CSS, è importante conoscere le parti di una regola CSS. Una regola CSS è un blocco di codice contenente uno o più selettori e una o più dichiarazioni.

In questa regola CSS, il selettore è .my-css-rule che trova tutti gli elementi con una classe my-css-rule nella pagina. All'interno delle parentesi graffe sono presenti tre dichiarazioni. Una dichiarazione è una coppia di proprietà e valore che applica gli stili agli elementi corrispondenti ai selettori. Una regola CSS può avere un numero illimitato di dichiarazioni e selettori.

Selettori semplici

Il gruppo di selettori più semplice ha come target gli elementi HTML, nonché classi, ID e altri attributi che possono essere aggiunti a un tag HTML.

Selettore universale

Browser Support

• 1
• 12
• 1
• 1

Source

Un selettore universale, noto anche come carattere jolly, corrisponde a qualsiasi elemento.

* {
  color: hotpink;
}

Questa regola fa sì che ogni elemento HTML della pagina abbia un testo rosa acceso.

Selettore di tipo

Browser Support

• 1
• 12
• 1
• 1

Source

Un selettore di tipo corrisponde direttamente a un elemento HTML.

section {
  padding: 2em;
}

Questa regola fa sì che ogni elemento <section> abbia 2em di padding su tutti i lati.

Selettore di classe

Browser Support

• 1
• 12
• 1
• 1

Source

Un elemento HTML può avere uno o più elementi definiti nell'attributo class. Il selettore di classi corrisponde a qualsiasi elemento a cui è applicata la classe.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Qualsiasi elemento a cui è applicata la classe verrà colorato di rosso:

.my-class {
  color: red;
}

Tieni presente che . è presente solo nel CSS e non nell'HTML. Questo perché il carattere . indica al linguaggio CSS di abbinare i membri dell'attributo della classe. Si tratta di un pattern comune in CSS, in cui un carattere speciale o un insieme di caratteri viene utilizzato per definire i tipi di selettori.

Un elemento HTML con una classe .my-class verrà comunque associato alla regola CSS riportata sopra, anche se ha diverse altre classi, ad esempio:

<div class="my-class another-class some-other-class"></div>

Questo perché il CSS cerca un attributo class che contenga la classe definita, anziché corrispondere esattamente a quella classe.

Nota: il valore di un attributo della classe può essere quasi qualsiasi cosa tu voglia. Un aspetto che potrebbe metterti in difficoltà è che non puoi iniziare una classe (o un ID) con un numero, ad esempio .1element. Per saperne di più, consulta la specifica.

Selettore ID

Browser Support

• 1
• 12
• 1
• 1

Source

Un elemento HTML con un attributo id deve essere l'unico elemento di una pagina con quel valore ID. Seleziona gli elementi con un selettore ID come questo:

#rad {
  border: 1px solid blue;
}

Questo CSS applicherà un bordo blu all'elemento HTML che ha un id di rad, come segue:

<div id="rad"></div>

Analogamente al selettore di classe ., utilizza un carattere # per indicare a CSS di cercare un elemento che corrisponda al id che lo segue.

Nota: se il browser rileva più istanze di un id, applicherà comunque le regole CSS che corrispondono al relativo selettore. Tuttavia, qualsiasi elemento con un attributo id dovrebbe avere un valore univoco, quindi, a meno che tu non stia scrivendo CSS molto specifici per un singolo elemento, evita di applicare stili con il selettore id perché non potrai riutilizzarli altrove.

Selettore di attributi

Browser Support

• 1
• 12
• 1
• 3

Source

Puoi cercare elementi che hanno un determinato attributo HTML o un determinato valore per un attributo HTML utilizzando il selettore di attributi. Indica a CSS di cercare gli attributi racchiudendo il selettore tra parentesi quadre ([ ]).

[data-type='primary'] {
  color: red;
}

Questo CSS cerca tutti gli elementi che hanno un attributo data-type con un valore primary, ad esempio:

<div data-type="primary"></div>

Invece di cercare un valore specifico di data-type, puoi anche cercare elementi con l'attributo presente, indipendentemente dal suo valore.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Entrambi gli elementi <div> avranno il testo rosso.

Puoi utilizzare selettori di attributi sensibili alle maiuscole aggiungendo un operatore s al selettore di attributi.

[data-type='primary' s] {
  color: red;
}

Ciò significa che se un elemento HTML avesse un data-type di Primary, invece di primary, non verrebbe visualizzato il testo rosso. Puoi fare il contrario, ovvero non fare distinzione tra maiuscole e minuscole, utilizzando un operatore i.

Oltre agli operatori per le maiuscole, hai accesso a operatori che corrispondono a parti di stringhe all'interno dei valori degli attributi.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

In questa demo, l'operatore "$" nel selettore di attributi recupera il tipo di file dall'attributo "href". In questo modo è possibile anteporre un prefisso all'etichetta, in base al tipo di file, utilizzando un pseudoelemento.

Selettori di raggruppamento

Un selettore non deve corrispondere a un solo elemento. Puoi raggruppare più selettori separandoli con virgole:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Questo esempio estende la modifica del colore sia agli elementi <strong> che agli elementi <em>. Viene esteso anche a una classe denominata .my-class e a un elemento che ha un attributo lang.

Verificare di aver compreso

Metti alla prova le tue conoscenze sui selettori semplici

* {}

Che tipo di selettore semplice viene utilizzato nello snippet riportato sopra?

attributo

[] vengono utilizzati per i selettori semplici degli attributi.

ID

# vengono utilizzati per i selettori semplici ID.

universale

* è il selettore semplice universale.

classe

. vengono utilizzati per i selettori semplici class.

div {}

Che tipo di selettore semplice viene utilizzato nello snippet riportato sopra?

classe

Un . viene utilizzato per i selettori semplici class.

tipo

Un nome element viene utilizzato per i selettori semplici type.

attributo

Le parentesi quadre [] vengono utilizzate per i selettori semplici degli attributi.

ID

Un # viene utilizzato per i selettori semplici ID.

Pseudo-classi e pseudo-elementi

CSS fornisce tipi di selettori utili che si concentrano su stati specifici della piattaforma, come quando un elemento viene visualizzato, le strutture all'interno di un elemento o parti di un elemento.

Pseudo-classi

Gli elementi HTML si trovano in vari stati, o perché con essi viene eseguita un'interazione o perché uno dei loro elementi secondari è in un determinato stato.

Ad esempio, un utente potrebbe passare il mouse sopra un elemento HTML o anche sopra un elemento secondario. Per queste situazioni, utilizza la pseudo-classe :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Scopri di più nel modulo relativo alle pseudoclassi.

Pseudo-elemento

Gli pseudo-elementi sono diversi dalle pseudo-classi perché, anziché rispondere allo stato della piattaforma, si comportano come se inserissero un nuovo elemento con CSS. Gli pseudo-elementi sono anche sintatticamente diversi dagli pseudo-classi, perché anziché utilizzare un singolo due punti (:), utilizziamo due due punti (::).

Nota: un doppio due punti (::) è ciò che distingue uno pseudo-elemento da una pseudo-classe, ma poiché questa distinzione non era presente nelle versioni precedenti delle specifiche CSS, i browser supportano un singolo due punti per gli pseudo-elementi originali, come :before e :after, per favorire la compatibilità con i browser meno recenti, come IE8.

.my-element::before {
  content: 'Prefix - ';
}

Come nella demo precedente, in cui hai anteposto all'etichetta di un link il tipo di file, puoi utilizzare l'elemento pseudo ::before per inserire contenuti all'inizio di un elemento o l'elemento pseudo ::after per inserire contenuti alla fine di un elemento.

Gli pseudo-elementi non sono però limitati all'inserimento di contenuti. Puoi anche utilizzarli per scegliere come target parti specifiche di un elemento. Ad esempio, supponiamo che tu abbia un elenco. Usa ::marker per applicare uno stile a ogni punto elenco (o numero) nell'elenco

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Puoi anche utilizzare ::selection per applicare uno stile ai contenuti evidenziati da un utente.

::selection {
  background: black;
  color: white;
}

Scopri di più nel modulo sugli pseudo-elementi.

Verificare di aver compreso

Verifica le tue conoscenze sugli pseudo selettori

I selettori di pseudo-elementi utilizzano quanti due punti?

:

Un : viene utilizzato per scegliere come target gli pseudo-classi.

::

Per scegliere come target gli pseudo-elementi vengono utilizzati due ::.

:::

Non è valido e non ha target.

p:hover {
  background: white;
  color: black;
}

Che tipo di selettore pseudo viene utilizzato nello snippet riportato sopra?

Pseudo-classe

Un : viene utilizzato per scegliere come target gli pseudo-classi.

Pseudo-elemento

Per scegliere come target gli pseudo-elementi vengono utilizzati due ::.

Selettori complessi

Hai già visto una vasta gamma di selettori, ma a volte avrai bisogno di un controllo più granulare con il CSS. È qui che entrano in gioco i selettori complessi.

A questo punto vale la pena ricordare che, anche se i seguenti selettori ci offrono più potenza, possiamo solo applicare la ricerca in modo ricorsivo verso il basso, selezionando gli elementi secondari. Non è possibile scegliere come target un elemento di livello superiore e selezionare un elemento principale. Spiegheremo cos'è la struttura a cascata e come funziona in una lezione successiva.

Combinatori

Un combinatore si trova tra due selettori. Ad esempio, se il selettore era p > strong, il combinatore è il carattere >. I selettori che utilizzano questi combinatori ti aiutano a selezionare gli elementi in base alla loro posizione nel documento.

Combinatore discendente

Per comprendere i combinatori dei discendenti, devi prima conoscere gli elementi principali e secondari.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

L'elemento principale è <p> che contiene il testo. All'interno dell'elemento <p> è presente un elemento <strong> che rende i relativi contenuti in grassetto. Poiché si trova all'interno di <p>, è un elemento secondario.

Un combinatore di discendenti ci consente di scegliere come target un elemento secondario. Viene utilizzato uno spazio () per indicare al browser di cercare gli elementi secondari:

p strong {
  color: blue;
}

Questo snippet seleziona tutti gli elementi <strong> che sono elementi secondari di elementi <p>, rendendoli blu in modo ricorsivo.

Poiché il combinatore discendente è ricorsivo, viene applicato il padding aggiunto a ogni elemento secondario, con un effetto sfalsato.

Questo effetto è meglio visualizzato nell'esempio riportato sopra, utilizzando il selettore del combinatore .top div. Questa regola CSS aggiunge il padding a sinistra a questi elementi <div>. Poiché il combinatore è ricorsivo, a tutti gli elementi <div> contenuti in .top verrà applicata la stessa spaziatura interna.

Dai un'occhiata al riquadro HTML di questa demo per vedere come l'elemento .top ha diversi elementi secondari <div> che a loro volta hanno elementi secondari <div>.

Combinatore fratello successivo

Puoi cercare un elemento che segue immediatamente un altro elemento utilizzando un carattere + nel selettore.

Per aggiungere spazio tra gli elementi impilzati, utilizza il combinatore fratello successivo per aggiungere spazio solo se un elemento è un fratello successivo di un elemento secondario di .top.

Puoi aggiungere un margine a tutti gli elementi secondari di .top utilizzando il seguente selettore:

.top * {
  margin-top: 1em;
}

Il problema è che, poiché selezioni tutti gli elementi secondari di .top, questa regola potrebbe creare spazio extra non necessario. Il combinatore fratello successivo, insieme a un selettore universale, ti consente non solo di controllare quali elementi ricevono spazi, ma anche di applicare spazi a qualsiasi elemento. Ciò ti offre una certa flessibilità a lungo termine, indipendentemente dagli elementi HTML visualizzati in .top.

Combinatore di fratelli successivi

Un combinatore successivo è molto simile a un selettore fratello successivo. Tuttavia, al posto di un carattere +, utilizza un carattere ~. La differenza è che un elemento deve solo seguire un altro elemento con lo stesso elemento principale, invece di essere l'elemento successivo con lo stesso elemento principale.

Utilizza un selettore successivo insieme a un'pseudoclasse ":checked" per creare un elemento di opzione in puro CSS.

Questo combinatore successivo offre un po' meno di rigidità, che è utile in contesti come l'esempio riportato sopra, dove cambiamo il colore di un'opzione personalizzata quando la casella di controllo associata ha lo stato :checked.

Combinatore secondario

Un combinatore secondario (noto anche come discendente diretto) consente un maggiore controllo sulla ricorsione fornita dai selettori combinatori. Se utilizzi il carattere >, limiti il selettore del combinatore in modo che venga applicato solo agli elementi secondari diretti.

Considera l'esempio del selettore fratello precedente e successivo. Lo spazio viene aggiunto a ogni fratello maggiore, ma se uno di questi elementi ha anche elementi fratello maggiore come elementi secondari, può risultare in spazi aggiuntivi indesiderati.

Per ovviare a questo problema, modifica il selettore fratello successivo in modo da includere un combinatore secondario: > * + *. D'ora in poi la regola verrà applicata solo agli elementi secondari diretti di .top.

Selettori composti

Puoi combinare i selettori per aumentare la specificità e la leggibilità. Ad esempio, per scegliere come target gli elementi <a>, che hanno anche una classe .my-class, scrivi quanto segue:

a.my-class {
  color: red;
}

In questo modo, il colore rosso non verrà applicato a tutti i link e verrà applicato solo a .my-class if si trova in un elemento <a>. Per saperne di più, consulta il modulo Specificità.

Verificare di aver compreso

Verifica la tua conoscenza dei selettori complessi

Quale dei seguenti simboli non è un combinatore di selettori?

>

Il combinatore di discendenti diretti.

÷

Non valido, non è un simbolo CSS.

+

Il combinatore fratello successivo.

*

Questo selettore semplice universale.

.

Il selettore di classe semplice.

section.awesome {
  border: 1px solid hotpink;
}

Il selettore riportato sopra è un esempio di...

Combinatore

Un simbolo utilizzato per combinare i selettori in uno più specifico.

Selettore composto

Quando vengono utilizzati insieme due o più selettori, senza un combinatore, per creare un selettore più specifico.

Terminator

Non è un tipo di selettore, ma sembra, giusto? 🤖

Risorse

• Riferimento ai selettori CSS
• Gioco con selettori interattivi
• Riferimento a pseudo-classi e pseudo-elementi
• Uno strumento che traduce i selettori CSS in spiegazioni in linguaggio semplice