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
* {}
Che tipo di selettore semplice viene utilizzato nello snippet riportato sopra?
div {}
Che tipo di selettore semplice viene utilizzato nello snippet riportato sopra?
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
Quanti due punti usano i selettori di pseudo-elemento?
p:hover { background: white; color: black; }
Che tipo di pseudoselettore viene utilizzato nello snippet riportato sopra?
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
Quale dei seguenti simboli non è un combinatore del selettore?
section.awesome { border: 1px solid hotpink; }
Il selettore riportato sopra è un esempio di...