Selettori

Podcast su CSS - 002: selettori

Se c'è un testo che deve essere più grande e rosso solo se è il primo paragrafo di un articolo, come si fa?

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

Utilizza 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 numerose opzioni per selezionare gli elementi e applicarvi regole, da molto semplici a molto complesse per aiutarti a 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. Esistono tre dichiarazioni all'interno delle parentesi graffe. 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 gli elementi HTML oltre a classi, ID e altri attributi che possono essere aggiunti a un tag HTML.

Selettore universale

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

* {
  color: hotpink;
}

In base a questa regola, ogni elemento HTML della pagina presenta testo hotpin.

Selettore del tipo

Un selettore del tipo corrisponde direttamente a un elemento HTML.

section {
  padding: 2em;
}

In base a questa regola, ogni elemento <section> avrà 2em di padding su tutti i lati.

Selettore classe

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

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

Tutti gli elementi a cui è stata applicata la classe vengono di colore rosso:

.my-class {
  color: red;
}

Nota che . è presente solo nel CSS e non nell'HTML. Questo perché il carattere . indica al linguaggio CSS di corrispondere ai membri degli attributi della classe. Si tratta di un modello comune in CSS, in cui un carattere speciale o un insieme di caratteri viene utilizzato per definire i tipi di selettore.

Un elemento HTML con una classe .my-class continuerà ad essere abbinato alla regola CSS precedente, anche se ha diverse altre classi, come la seguente:

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

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

Selettore ID

Un elemento HTML con un attributo id deve essere l'unico elemento su una pagina con quel valore ID. Puoi selezionare gli elementi con un selettore ID come segue:

#rad {
  border: 1px solid blue;
}

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

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

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

Selettore attributo

Puoi cercare gli elementi che hanno un determinato attributo HTML o che hanno un determinato valore per un attributo HTML, utilizzando il selettore di attributi. Indica a CSS di cercare gli attributi mettendo 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 il seguente:

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

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

[data-type] {
  color: red;
}

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

Entrambi questi elementi <div> avranno testo rosso.

Puoi usare 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 valore data-type di Primary, anziché primary, non riceverebbe testo rosso. Puoi fare il contrario, ovvero l'insensibilità alle maiuscole, utilizzando un operatore i.

Oltre agli operatori Case, hai accesso agli 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;
}

Selettori di raggruppamento

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

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

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

Verifica la tua comprensione

Verifica le tue conoscenze sui selettori semplici

* {}

div {}

Pseudo-classi e pseudo-elementi

CSS fornisce tipi di selettori utili che si concentrano su uno specifico stato della piattaforma, come il passaggio del mouse sopra un elemento, le strutture all'interno di un elemento o le sue parti.

Pseudo-classi

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

Ad esempio, un utente può far passare il puntatore del mouse su un elemento HTML oppure l'utente può far passare il mouse anche su 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.

Pseudoelemento

Gli pseudo-elementi differiscono dalle pseudo-classi perché invece di rispondere allo stato della piattaforma, agiscono come se stessero inserendo un nuovo elemento con CSS. Gli pseudo-elementi sono inoltre sintatticamente diversi dalle pseudo-classi, perché invece di utilizzare un solo punto dei due punti (:), utilizziamo i doppi due punti (::).

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

Come nella demo precedente in cui hai aggiunto il prefisso all'etichetta di un link con il tipo di file, puoi usare 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 utilizzarle per scegliere come target parti specifiche di un elemento. Ad esempio, supponiamo che tu abbia un elenco. Utilizza ::marker per definire ogni punto elenco (o numero) nell'elenco

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

Puoi anche usare ::selection per definire lo stile dei contenuti messi in evidenza da un utente.

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

Scopri di più nel modulo sugli pseudo-elementi.

Verifica la tua comprensione

Verifica la tua conoscenza degli pseudo selettori

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

Selettori complessi

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

A questo punto vale la pena ricordare che, sebbene i seguenti selettori ci diano maggiore potenza, possiamo solo procedere a cascata verso il basso, selezionando gli elementi secondari. Non siamo in grado di eseguire il targeting verso l'alto e selezionare un elemento principale. Vedremo cos'è la cascata e come funziona in una lezione successiva.

Combinatori

Un combinatore è ciò che 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 capire i combinatori discendenti, devi prima capire gli elementi padre e figlio.

<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 suoi contenuti in grassetto. Poiché si trova all'interno di <p>, è un elemento secondario.

Un combinatore discendente consente 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 degli elementi <p>, rendendoli blu in modo ricorsivo.

Questo effetto viene visualizzato meglio nell'esempio sopra, utilizzando il selettore combinatore, .top div. La regola CSS aggiunge la spaziatura interna sinistra a questi elementi <div>. Poiché il combinatore è ricorsivo, a tutti gli elementi <div> 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 di pari livello successivo

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

Per aggiungere spazio tra elementi in pila, utilizza il combinatore successivo per aggiungere spazio solo se un elemento è un elemento di pari livello successivo di un elemento figlio di .top.

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

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

Il problema è che, poiché stai selezionando ogni elemento secondario di .top, questa regola crea potenzialmente spazio extra, non necessario. Il combinatore di pari livello successivo, combinato con un selettore universale, ti consente non solo di controllare quali elementi ricevono spazio, ma anche di applicare spazio a qualsiasi elemento. Ciò ti offre una certa flessibilità a lungo termine, indipendentemente da quali elementi HTML vengono visualizzati in .top.

Combinatore di pari livello successivo

Un combinatore successivo è molto simile a un selettore di pari livello successivo. Invece di un carattere +, utilizza un carattere ~. La differenza sta nel fatto che un elemento deve seguire solo un altro elemento con lo stesso elemento principale, invece di essere l'elemento successivo con lo stesso elemento principale.

Questo combinatore fornisce un po' meno rigidità, il che è utile in contesti come il campione precedente, in cui modifichiamo il colore di uno switch personalizzato quando la casella di controllo associata ha lo stato :checked.

Combinatore figlio

Un combinatore figlio (noto anche come discendente diretto) consente un maggiore controllo sulla ricorsione che viene fornita con i selettori combinatori. Utilizzando il carattere >, limiti il selettore combinatore in modo che venga applicato solo ai figli diretti.

Considera l'esempio di selettore di pari livello precedente e successivo. Lo spazio viene aggiunto a ogni elemento di pari livello successivo, ma se uno di questi elementi ha anche elementi di pari livello successivi come figli, la spaziatura aggiuntiva può essere indesiderata.

Per ridurre questo problema, modifica il selettore di pari livello successivo per incorporare un combinatore figlio: > * + *. D'ora in poi la regola verrà applicata solo agli elementi secondari diretti di .top.

Selettori composti

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

a.my-class {
  color: red;
}

In questo modo il colore rosso non viene applicato a tutti i link e viene applicato anche a .my-class if il colore rosso si trova su un elemento <a>. Per ulteriori informazioni, consulta il modulo sulla specificità.

Verifica la tua comprensione

Verifica le tue conoscenze sui selettori complessi

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

Risorse

• Riferimento per i selettori CSS
• Gioco dei selettori interattivi
• Riferimento per pseudo-classi e pseudo-elementi
• Uno strumento che converte i selettori CSS in spiegazioni in inglese