I selettori di base in CSS

Alla base del buon funzionamento di CSS ci stanno i selettori. Come si può evincere già dal nome un selettore, seleziona. Cosa? zero, uno o più elementi nel documento HTML.

La sintassi generale delle regole CSS è la seguente:

1h1 {
2   color: red;
3   font-size: 150px
4}

Dove:

• h1 è il selettore, in questo caso di elemento e che seleziona tutti gli elementi HTML <h1> presenti nel documento (n.b. deve essercene uno in pagina)
• La coppia di parentesi graffe apre la regola al cui interno vengono poste le dichiarazioni in forma proprietà: valore

Ogni dichiarazione termina con un punto e virgola, qualora non ci fosse le dichiarazioni successive e in alcuni casi le regole successive verranno ignorate.

Un foglio di stile può contenere più regole e per una questione di semplicità di lettura vengono poste una sotto l’altra.

I principali selettori di CSS

CSS ha una quantità smisurata di selettori, ma che possiamo riassumere nelle seguenti categorie:

• selettori d’elemento
• selettori di classe
• selettori di ID
• selettori di attributo
• pseudo classi
• pseudo elementi
• selettore universale

Selettori d’elemento

Noti anche come selettori di tipo, questo genere di selettori permette di selezionare tutti gli elementi con un determinato nome di tag (o nodo). Ad esempio, come visto in precedenza, h1 per selezionare il tag <h1>, ma lo stesso può essere fatto per tutti gli altri elementi HTML che conosci.

La specificità di un selettore di tipo è: 0 0 0 0 1

1p {
2   color: red;
3}

Selettori di classe

I selettori di classe permettono di selezionare un sottogruppo di elementi alla quale è stata assegnata via HTML una classe attraverso l’attributo class. In CSS per indicare una classe si antepone il punto (.) al nome della classe, ad esempio .intro.

La specificità di un selettore di classe è: 0 0 0 1 0

1.intro {
2   font-size: 2rem;
3}

Selettori di ID

I selettori di ID permettono di selezionare un sottogruppo ancora più ristretto (ora immagino stia diventando sempre più chiaro il concetto di specifico) alla quale è stato assegnato un ID via HTML attraverso l’omonimo attributo. L’ID in un documento HTML deve essere univoco, un po’ come per <h1>. In CSS per indicare un ID si antepone il cancelletto (#) al nome dell’ID, ad esempio #titolo-principale.

La specificità di un selettore di ID è: 0 0 1 0 0

1#titolo-principale {
2   font-size: 4rem;
3   color: #bada55;
4   font-weight: bold;
5}

N.b. Per favore questo simbolo # si chiama ufficialmente segno del numero (carattere UNICODE U+0023), ma puoi chiamarlo cancelletto, hash o diesis, ma ti prego non hashtag. Grazie.

Selettori di attributo

I selettori di attributo permettono di selezionare quegli elementi che hanno un attributo specifico o un attributo con un valore o parte di un valore specifico.

La specificità di un selettore di classe è: 0 0 0 1 0

Ci sono vari modi di usare questo selettore:

Selettore di attributo generico

1[title] {
2   color: purple;
3}

Questo selettore selezionerà tutti gli elementi che hanno un attributo title impostato.

Selettore di attributo con valore esatto

1[href=”https://www.manuelricci.com”] {
2   color: gold;
3}

Questo selettore selezionerà tutti gli elementi che hanno l’attributo href impostato esattamente a https://www.manuelricci.com.

Selettore di attributo che contiene un valore

1[class~=”logo”] {...}
2[class|=”logo”] {...}
3[class*=”logo”] {...}

Questi selettori selezioneranno rispettivamente:

• Elementi con attributo class che contengono in una lista separata da spazi (class è l’esempio perfetto per via della possibilità di assegnare classi multiple) il valore specificato
• Elementi con attributo class che contengono il valore esatto o seguito immediatamente da un -.
• Elementi con attributo class che contengono in un punto non meglio precisato il valore specificato.

Selettore di attributo di posizione

1[href^=”https”] {...}
2[src$=”.jpg”] {...}

Questi selettori selezioneranno rispettivamente:

• Elementi con attributo href che iniziano con https
• Elementi con attributo src che finiscono con .jpg

I due simboli in questione sono presi in prestito dalla espressioni regolari, se volessi approfondire l’argomento puoi seguire il corso completo sulle espressioni regolari.

Pseudo classi

Le pseudo classi sono una parola chiave aggiunta al selettore che specifica uno stato speciale dell’elemento selezionato. Ad esempio un link che è stato visitato o un bottone sulla quale passa il mouse.

Qui CSS si sbizzarrisce abbastanza, ma anche qui possiamo riassumere con le seguenti categorie di pseudo classi:

• Visualizzazione: relative alla modalità di visualizzazione (es. :fullscreen)
• Input: relative agli elementi dei form (es. :disabled, :read-only)
• Linguistico: relative agli attributi di lingua (es. lang)
• Link (o location): relative ai link (es. :visited)
• Risorsa: relative allo stato di un media come audio o video (es. :playing e :paused)
• Tempo-dimensionali: relative a qualcosa che ha a che fare con il tempismo, come ad esempio le caption di un video. (es. :current, :past e :future)
• Strutturanti ad albero: relative alla posizione dell’elemento nel content tree (es. :empty, :nth-last-child, :first-child)
• Azioni utente: relative alle interazioni dell’utente con l’elemento (es. :hover, :active e :focus)
• Funzionali: categoria di pseudo classi che accetta una lista di selettori come parametro (es. :is() e :where).

1a:visited {...}
2button:hover {...}
3input[type=”text”]:disabled {...}
4.video-player:paused {...}
5div:empty {...}

Pseudo elementi

Gli pseudo-elementi sono delle parole chiave aggiunte al selettore che permettono di modificare una specifica parte dell'elemento selezionato.

Si distinguono dalle pseudo-classi perché normalmente hanno una coppia di due punti :: che precedono il nome dello pseudo-elemento. I browser supportano il singolo due punti solo per i quattro pseudo-elementi originali ::before, ::after, ::first-line e ::first-letter.

La specificità di un selettore di classe è: 0 0 0 0 1

Alcuni pseudo elementi disponibili in CSS sono:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder

1p::first-line {...}
2p:first-letter {...}
3article::after {...}

Selettore universale

Il selettore universale è molto semplice ed è uno solo. * è il selettore che seleziona tutto. La specificità di un selettore di classe è: 0 0 0 0 0 (nessun errore, il selettore universale non vale niente).

1* {...}

Combinare i selettori CSS

Se l’abbondante numero di selettori non fosse sufficiente sappi che questi possono essere anche combinati per poter creare selettori sempre più specifici, già perché come già accennato nella precedente lezione teorica i selettori in termini di specificità si sommano.

Non solo, abbiamo anche dei simboli che ci permettono di combinarli meglio e di selezionare gli elementi in base alla parentela all’interno del documento HTML.

I principali simboli che abbiamo a disposizione sono:

• > (discendente diretto)
• + (fratello adiacente)
• ~ (fratello generico)

Per comprenderli meglio prendiamo come esempio il seguente markup:

1<article>
2   <div>
3      <img src=”immagine.png” alt=”lorem ipsum” />
4      <a href=”/categoria-1”>Categoria 1</a> 
5   </div>
6   <h2>Lorem ipsum</h2>
7   <p>Lorem ipsum dolor sit amet consecutor elit</p>
8   <a href=”/categoria-1/lorem-ipsum”>Continua a leggere</a>
9</article>

Ipotizziamo di voler selezionare il link dopo l’immagine, come si fa?

• Usiamo un selettore di elementi? No perché c’è anche il link del continua a leggere
• Usiamo una pseudo classe strutturante come :last-child? No perché entrambi i link sono ultimogeniti
• Usiamo il selettore div > a, img + a o img ~ a e avremmo in tutti i casi selezionato il link desiderato. Questo perché in questo caso specifico il tag <a> è discendente diretto di <div> (se avessimo scritto div a con lo spazio al posto del maggiore avrebbe funzionato lo stesso, ma se avessimo scritto article a no perché anche l’altro link è discendente di <article>). Allo stesso modo è anche fratello adiacente di <img /> perché viene subito dopo ed è anche generico perché di fatto è l’unico altro fratello di <img />.
• Ci sarebbero stati altri modi validi per poter selezionare quel link e sarebbero stati più o meno specifici.

Casi speciali

Un breve specchietto su quelli che sono i casi speciali che magari è sempre meglio tenere a mente:

• Il selettore universale (*) ha specificità 0
• Gli pseudo-elementi (::first-line) valgono 1, mentre le pseudo-classi (:hover) valgono 1 0
• :not() non ha specificità, ma ciò che c’è tra parentesi sì
• :where() e :is() sono uguali, ma non identici perché il selettore tra le parentesi di :where non ha specificità, mentre in quelle di :is sì
• Per :has() vale lo stesso discorso di :is() e :not().

Ricapitolando

CSS é veramente ricco di selettori, in questa prima parte abbiamo compreso la logica principale, successivamente durante il corso verrà ripreso quest’argomento andando a lavorare con selettori più recenti e particolarmente potenti che qui sono stati solo accennati, ma che meritano una lezione a se stante.