Pseudo-Elementi e Pseudo-Classi nei CSS

Ogni volta che dobbiamo modificare uno stile CSS sul nostro web, io e Toni giochiamo a sasso-carta-forbici per vedere chi è il "ragazzo fortunato" che può svolgere il compito. Come mai, potresti chiedere? Bene, per molto tempo lavorare con HTML e CSS è stato un dolore nel culo, poiché riparare qualcosa da un lato ha rotto molte cose altrove.

Ma la verità è che i CSS sono cambiati molto negli ultimi anni e se sfrutti le sue nuove funzionalità, è molto più facile impaginare e modellare il tuo sito web in modo corretto ed efficace. Secondo me, due dei grandi progressi nei CSS che abbiamo visto di recente sono l'inclusione, in primo luogo, di flex (per il layout di righe e colonne) e, poco dopo, grid (per il layout delle griglie).

CSS è ricco di funzionalità che possono semplificare il tuo lavoro . E oggi ne vedremo due: pseudo-elementi e pseudo-selettori.

Come "creare contenuti" con CSS Pseudo-Elements

Gli pseudo-elementi CSS sono un meccanismo per accedere a parti dell'HTML che non hanno un nodo associato nel DOM . Ad esempio, una "parte del nostro documento" potrebbe essere "la prima riga di un paragrafo", "la prima lettera di un paragrafo" o "la selezione effettuata dall'utente", nessuno dei quali ha un nodo associato. Ma gli pseudo-elementi sono anche un modo per creare contenuti prima o dopo un elemento esistente tramite CSS.

Gli pseudo-elementi disponibili in CSS3 sono:

• ::before : aggiunge contenuto prima di un elemento
• ::afte r: aggiunge contenuto dopo un elemento
• ::first-letter : seleziona la prima lettera dell'elemento "block" (ovvero quelli la cui proprietà di display è impostata su block , inline-block , table-cell , ecc.)
• ::first-line : seleziona la prima riga di un elemento “blocco”.
• ::selection : si riferisce alle parti del documento che il visitatore ha selezionato

Come puoi vedere, gli pseudo-elementi sono caratterizzati dall'iniziare con una coppia di due punti ( :: ). Ed è così che li usi.

Selezione di parti del documento

Supponiamo, ad esempio, di volere che un determinato paragrafo abbia la prima riga in arancione e sottolineata. Bene, fai qualcosa del genere:

 p::first-line { color: orange; text-decoration: underline; }

e otterrai il risultato corretto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, a pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Se invece si vuole modificare la selezione, l'approccio è esattamente lo stesso. Tieni presente che il numero di proprietà CSS che possiamo modificare è limitato a color , background , cursor e outline :

 p::selection { background: #21acde; color: white; }

Puoi vedere il risultato nel paragrafo seguente, supponendo che tu selezioni qualcosa:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, a pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Creazione di nuovi contenuti

Hai anche la possibilità di aggiungere dinamicamente contenuti alla tua pagina. Ad esempio, immagina di avere un elenco di elementi come questo:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Di solito, ecco come appaiono le liste:

• Uno
• Due
• Tre

ma puoi modificarlo in modo che ogni elemento sia separato dal successivo usando una barra blu:

• Uno
• Due
• Tre

utilizzando lo pseudo-elemento ::after su ogni elemento dell'elenco come segue:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

Con gli pseudo-elementi ::before e ::after puoi fare molte grandi cose. Ad esempio, puoi combinare più sfondi in un unico elemento, visualizzare gli URL dei collegamenti quando la pagina viene stampata, ordinare gli elementi mobili, etichettare blocchi, abbellire la tua tipografia e così via.

Come applicare gli stili in modo più preciso utilizzando le pseudo-classi

Le pseudo-classi CSS ci consentono di selezionare elementi del nostro sito Web che si trovano in uno stato specifico o hanno una proprietà speciale che li distingue. L'esempio più comune (e più antico) è probabilmente link pseudo-classi:

• a:link sono quei link che non hai già visitato
• a:visited è qualsiasi collegamento che hai già visitato
• a:hover è il link su cui stai passando il mouse
• a:focus corrisponde al collegamento attualmente attivo (che è simile al passaggio del mouse, ma usando la tastiera invece del mouse)
• a:active corrisponde al collegamento su cui stai attualmente facendo clic

In CSS ci sono circa 60 pseudo-classi. La stragrande maggioranza di essi ti consente di filtrare gli elementi in base al loro stato (ad esempio, puoi selezionare elementi di sola lettura usando, hai indovinato, la pseudo-classe :read-only ). Ma ci sono alcune interessanti “eccezioni” a questa regola che vale la pena menzionare.

Ma prima di farlo, solo una breve nota a margine: nota come puoi distinguere una pseudo-classe da uno pseudo-elemento perché il primo inizia con due due punti ( : ) mentre il secondo inizia con due ( :: ).

Selezionare i figli di un elemento usando le pseudo-classi “figlio” e “di tipo”.

Ricordi l'esempio che abbiamo visto prima in cui abbiamo aggiunto una barra verticale per separare gli elementi di un elenco? Bene, se guardi da vicino, vedrai che la regola che abbiamo impostato non funziona del tutto:

• Uno
• Due
• Tre

perché l'ultimo elemento include anche una barra verticale, anche se non dovrebbe. Se vogliamo rimuoverlo, possiamo fare qualcosa del genere:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

che funziona esattamente come immagineresti:

• Uno
• Due
• Tre

Come puoi vedere, tutto ciò che stiamo facendo è aggiungere una nuova regola usando la pseudo-classe :last-child , che ci permette di selezionare l'ultimo elemento li nella nostra lista ul e, una volta che l'abbiamo, nascondere il suo pseudo-elemento ::after con la proprietà display impostata su none .

Caratteristiche speciali di * -child e * -of-type

Esistono tre varianti della pseudo-classe *-child :

• :first-child corrisponde al primo figlio di un elemento (duh!)
• :last-child fa lo stesso, ma con quest'ultimo
• :nth-child(i) , hai indovinato, seleziona l' i -esimo elemento (quindi, ad esempio, :nth-child(2) corrisponde al secondo figlio)

Quindi diamo un'occhiata e pensiamo al seguente CSS:

 li strong:first-child { color: orange; text-decoration: underline; }

e il seguente snippet HTML:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

Cosa pensi che succederà? In linea di principio, sembra che in tutti e tre i casi, la parola ipsum sarà arancione e sottolineata, perché ipsum è il primo figlio strong in ogni elemento li , giusto? Vediamo:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Bene, abbastanza vicino. Riesci a indovinare perché è successo?

La pseudo-classe :first-child si applica al primo figlio di un elemento. Nella prima frase, ipsum è il primo tag strong , che sembra essere il primo figlio. Nella seconda frase, il primo nodo figlio è em (con la parola Lorem ) e poi arriva un tag strong con la parola ipsum . Pertanto, questo tag forte non è il "primo figlio". Infine, nella terza frase ci sono due tag che corrispondono alla nostra regola: ipsum (è come la prima frase) e sit . Nota come sit è un tag strong che è il primo figlio del suo tag genitore ( em ).

Quindi, se volessimo sottolineare il primo tag strong di ogni elemento li ? Bene, dobbiamo usare una pseudo-classe diversa e assicurarci di abbinare solo elementi che sono figli diretti di li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

che funziona come previsto:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Abbastanza fantastico, eh? Anche in questo caso, ci sono tre varianti di questa pseudo-classe:

• x:first-of-type corrisponde al primo fratello il cui tipo è x
• x:last-of-type seleziona l'ultimo
• x:nth-of-type(i) corrisponde all'i -esimo fratello il cui tipo è x

Selezionando l'opposto con :not

Infine, la pseudo-classe di cui volevo parlarti oggi è :not . :not è una pseudo-classe che corrisponde a quegli elementi che non soddisfano una certa proprietà. Ad esempio, torniamo al nostro esempio precedente:

• Uno
• Due
• Tre

Per risolvere il problema della barra che compare nell'ultimo elemento, in pratica abbiamo (1) aggiunto la barra a tutti gli elementi li e (2) sovrascriviamo la regola nell'ultimo elemento e la nascondiamo:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Ma questo non sembra molto ottimale, vero? Stiamo superando con il primo tule e quindi dobbiamo correggere i nostri stili nell'ultimo elemento. Quello che volevamo davvero era aggiungere la barra a tutti gli elementi tranne l'ultimo...

Bene, possiamo ottenerlo applicando la pseudo-classe :not e combinandola con :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

che applica lo stile a tutti gli elementi li che non sono l'ultimo elemento ( :not(:last-child) ), che descrive perfettamente il nostro obiettivo e quindi risolve il nostro problema:

• Uno
• Due
• Tre

In sintesi

Gli pseudo-elementi e le pseudo-classi CSS ci consentono di essere molto precisi quando accediamo ai diversi elementi del nostro sito web. Con essi possiamo scrivere regole CSS più concise e specifiche, il che ne semplifica la manutenzione ed evita la possibilità di dover sovrascrivere continuamente regole generiche per casi specifici.

Spero che questo post ti sia piaciuto e, se l'hai fatto, condividilo con i tuoi amici!

Immagine in primo piano di JFL su Unsplash.