Selettori

Podcast CSS - 002: Selettori

Se hai un testo che vuoi ingrandire e rosso solo se è il primo paragrafo di un articolo, come puoi farlo?

<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>

Puoi usare un selettore CSS per trovare quell'elemento specifico e applicare una regola CSS come questa.

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

CSS offre molte opzioni per selezionare gli elementi e applicarvi regole, che vanno da molto semplice a molto complesso, per risolvere situazioni come questa.

Le parti di una regola CSS

Per capire come funzionano i 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 valori che applica stili agli elementi corrispondenti ai selettori. Una regola CSS può avere tutte le dichiarazioni e i selettori che vuoi.

Selettori semplici

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

Selettore universale

Un selettore universale, chiamato anche carattere jolly, trova corrispondenze con qualsiasi elemento.

* {
  color: hotpink;
}

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

Selettore del tipo

Un selettore del 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 classe

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

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

Tutti gli elementi a cui è applicata la classe assumono il colore rosso:

.my-class {
  color: red;
}

Nota come l'elemento . è presente solo in CSS e non nel codice HTML. Questo perché il carattere . indica alla lingua CSS di corrispondere ai membri degli attributi di classe. Si tratta di un pattern comune in CSS, dove 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 abbinato alla regola CSS precedente, anche se hanno molti altri corsi, come questo:

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

Questo perché il CSS cerca un attributo class che contiene la classe definita, invece di far corrispondere esattamente quella classe.

Selettore ID

Un elemento HTML con un attributo id deve essere l'unico elemento su una pagina con quel valore ID. Selezioni elementi con un Selettore ID come questo:

#rad {
  border: 1px solid blue;
}

Questo CSS applica un bordo blu all'elemento HTML che ha un valore id di rad, in questo modo:

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

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

Selettore attributo

Puoi cercare elementi che hanno un determinato attributo HTML, o avere un certo valore per un attributo HTML, utilizzando il selettore degli attributi. Indica al 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 valore primary, come questo:

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

Anziché cercare un valore specifico per data-type, puoi anche cercare elementi in cui 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 testo in rosso.

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

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

Ciò significa che se un elemento HTML aveva un valore data-type di Primary, invece di primary, non verrebbe visualizzato testo in rosso. Puoi fare l'opposto, ovvero l'insensibilità alle maiuscole, utilizzando un operatore i.

Insieme agli operatori dei casi, hai accesso agli operatori che corrispondono a porzioni 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;
}

Selettori di raggruppamento

Un selettore non deve necessariamente 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 a entrambi gli elementi <strong> e <em>. È inoltre estesa a una classe denominata .my-class e a un elemento che ha un attributo lang.

Verifica le tue conoscenze

Verifica le tue conoscenze sui selettori semplici

* {}

div {}

Pseudo-classi e pseudo-elementi

CSS fornisce utili tipi di selettori incentrati sullo stato specifico della piattaforma, come quando passi il mouse su un elemento, strutture all'interno di un elemento o parti di un elemento.

Pseudo-classi

Gli elementi HTML si trovano in vari stati, a causa dell'interazione, o uno degli elementi secondari è in un determinato stato.

Ad esempio, un utente potrebbe far passare il mouse sopra un elemento HTML o anche un elemento secondario. In questi casi, 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 pseudo-classi.

Pseudo-elemento

Gli pseudo-elementi differiscono dalle pseudo-classi perché invece di rispondere allo stato della piattaforma, come se fosse l'inserimento di un nuovo elemento con CSS. Anche gli pseudo-elementi sono sintatticamente diversi dalle pseudo-classi, poiché invece di utilizzare i due punti (:), utilizziamo i due punti (::).

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

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

Tuttavia, gli pseudo-elementi non si limitano all'inserimento di contenuti. Puoi anche utilizzarli per scegliere come target parti specifiche di un elemento. Ad esempio, supponiamo che tu abbia un elenco. Utilizza ::marker per applicare uno stile a ciascun 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 definire lo stile dei contenuti evidenziati da un utente.

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

Scopri di più nel modulo sugli pseudo-elementi.

Verifica le tue conoscenze

Verifica le tue conoscenze sugli pseudoselettori

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

Selettori complessi

Hai già visto una vasta gamma di selettori, ma a volte potresti avere 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 danno più potenza, possiamo solo a cascata, selezionando gli elementi secondari. Non siamo in grado di eseguire il targeting verso l'alto e selezionare un elemento principale. Esaminiamo cos'è la cascata e come funziona in una lezione successiva.

Combinatori

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

Combinatore discendente

Per comprendere i combinatori discendenti, devi prima conoscere gli elementi principale e secondario.

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

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

Un combinatore discendente ci permette di scegliere come target un elemento figlio. 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 solo elementi secondari di elementi <p>, rendendoli blu in modo ricorsivo.

Questo effetto è visto meglio nell'esempio precedente, usando il selettore combinatore, .top div. La regola CSS aggiunge una spaziatura interna sinistra a questi elementi <div>. Poiché il combinatore è ricorsivo, a tutti gli elementi <div> che si trovano in .top verrà applicata la stessa spaziatura interna.

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

Combinatore di pari livello successivo

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

Per aggiungere spazio tra gli elementi impilati, usare il successivo combinatore di pari livello per aggiungere spazio solo se un elemento è un elemento di pari livello 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 dato che selezioni ogni elemento secondario di .top, questa regola può creare spazio aggiuntivo non necessario. Il prossimo combinatore di pari livello, combinato con un selettore universale, ti consente non solo di controllare quali elementi occupano spazio, ma applicano anche spazio a qualsiasi elemento. Questo ti offre una certa flessibilità a lungo termine, a prescindere dagli elementi HTML visualizzati in .top.

Combinatore successivo

Un combinatore successivo è molto simile a un selettore di pari livello successivo. Tuttavia, al posto del carattere +, usa un carattere ~. La differenza è che un elemento deve semplicemente seguire un altro elemento con lo stesso padre, invece di essere l'elemento successivo con lo stesso elemento principale.

Questo combinatore successivo fornisce un po' meno rigidità, che è utile in contesti come l'esempio precedente, in cui cambiamo il colore di un sensore personalizzato quando la casella di controllo associata ha lo stato :checked.

Combinatore bambino

Un combinatore figlio (noto anche come discendente diretto) consente di avere un maggiore controllo sulla ricorsione fornita dai selettori combinatori. Utilizzando il carattere >, limiti il selettore del combinatore in modo che applichi solo ai bambini diretti.

Considera l'esempio di selettore di pari livello precedente. Lo spazio viene aggiunto a ogni prossimo elemento di pari livello, ma se uno di questi elementi ha anche Prossimi elementi di pari livello come elementi secondari, ciò può causare una spaziatura aggiuntiva indesiderata.

Per ovviare a questo problema, cambia il selettore del fratello successivo per incorporare un combinatore figlio: > * + *. Ora la regola verrà applicata solo agli elementi secondari diretti di .top.

Selettori composti

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

a.my-class {
  color: red;
}

Con questa azione il colore rosso non viene applicato a tutti i link e il colore rosso verrà applicato a .my-class solo se su un elemento <a>. Per ulteriori informazioni, consulta il modulo specificità.

Verifica le tue conoscenze

Metti alla prova le tue conoscenze sui selettori complessi

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

Risorse

• Informazioni sui selettori CSS
• Gioco dei selettori interattivi
• Riferimento di pseudo-classi e pseudo-elementi
• Uno strumento che traduce i selettori CSS in video esplicativi in inglese