Pseudo-Classi e Pseudo-Elementi

Pseudo-Classi CSS

Ricordi quando, nelle scorse guide, abbiamo parlato dei selettori CSS?
Non ne abbiamo, volutamente, menzionato una tipologia: i selettori per pseudo-classi.
I selettori per pseudo-classi sono dei selettori CSS preceduti da due punti e servono per selezionare degli elementi in base a determinate condizioni.
Andiamo per ordine: che cos’ è una pseudo-classe? Ti è mai capitato di passare il mouse su un elemento e vederlo cambiare? Ecco: molto probabilmente, in quel caso, quello che è cambiato è lo stato dell’elemento che è passato dallo stato normale allo stato di hover. Hover, è una pseudo-classe, ovvero una classe che definisce il modo in cui verrà raffigurato un elemento in un determinato stato.
Nel linguaggio CSS, ogni sviluppatore web lo sa bene, le pseudo-classi sono un elemento molto utile per conferire dinamicità quando decidi di creare un sito web.

Vediamo qual è la sintassi corretta e, successivamente, quali sono le principali pseudo-classi, divise per gli elementi del linguaggio html a cui appartengono.

button {
   border: solid red 2px;
   background-color: transparent;
   color : red;
}

button:hover {

/*prorietà css da modificare*/

   background-color: red;
   color : white;
}

Con il codice soprastante, possiamo vedere come, al passaggio del mouse sopra un bottone, questo cambi il colore del testo e il background (non ti preoccupare se vedi il colore cambiare all’improvviso, vedremo come modificare anche questa proprietà nella prossima guida).

Vediamo, ora, quali sono le principali le principali pseudo-classi che potrai utilizzare.

Pseudo classi tag anchor <a>

:link – Probabilmente la pseudo classe che genera più confusione nelle pseudo classi dei link. Starai pensando, ma non sono tutti link? In realtà no se questi non hanno l’attributo href, infatti questa pseudo classe seleziona solo i tag <a> con all’interno l’attributo href.
:visited – Seleziona i link che sono già stati visitati dall’utente, ovviamente in base alla cronologia del browser.
:active – Seleziona un link nel momento in cui viene attivato, ovvero, nel momento in cui viene cliccato e non è ancora stato rilasciato il tasto.

Pseudo classi tag di input

:focus – Seleziona il campo di input nel momento in cui l’utente ha cliccato per scriverci. è molto utile per dare uno stile diverso a un tag di input quando l’utente clicca e quindi far capire che può scriverci all’interno.
:target – La pseudo-classe target è usata insieme agli ID e corrisponde quando il tag hash nell’URL corrente corrisponde a quell’ID. Quindi, se ci si trova all’URL www.aulab.it/#contatti, il selettore #contatti:target corrisponderà. Questo può essere estremamente potente.
:enabled – Seleziona gli input che son di default nello stato abilitato.
:disabled – Seleziona gli input che hanno l’attributo “disabled”.
:checked – Seleziona i checkbox nel momento in cui vengono selezionati.
:indeterminate – Seleziona gli input radio che non sono ancora stati selezionati.
:required – Seleziona gli input che hanno l’attributo “required”.
:optional – Seleziona gli input che non hanno l’attributo “required” e sono quindi opzionali.

Pseudo Classi in base alla posizione dell’elemento

:first-child – Seleziona il primo figlio all’interno di un elemento
:last-child – Seleziona l’ultimo figlio all’interno di un elemento
:nth-child() – Seleziona gli elementi in base alla posizione all’interno di un elemento. Hai anche la possibilità di selezionare elementi pari / dispari, vediamo come:
- even / odd – Con queste keyword puoi selezionare rispettivamente tutti gli elementi pari o tutti gli elementi dispari
- n – Inserendo nelle parentesi tonde un numero selezionerai solo l’elemento che è in quella posizione
:nth-type() – Funziona come :nth-child ma si usa in luoghi in cui gli elementi dello stesso livello sono di tipo diverso. Ad esempio, se all’interno di un <div> ci fossero una serie di paragrafi e una serie di immagini.
:first-of-type – Seleziona il primo elemento di un determinato tipo di elemento.
:last-of-type – Seleziona l’ultimo elemento di un determinato tipo di elemento.
:nth-last-of–type() – Funziona con nth-type ma partendo da sotto.
:nth-last-child() – Funziona con nth-child ma partendo da sotto.
:only-of-type – Seleziona l’elemento se è l’unico di quel tipo all’interno dell’elemento padre

<div>
   <ul> <!-- ul:only-of-type -->
   <li>primo</li> <!-- li:first-child | li:nth-child(odd) -->
<li>secondo</li> <!-- li:nth-child(2) | li:nth-child(even) -->
<li>terzo</li> <!-- li:last-child | li:nth-child(odd) -->
</ul>

   <div>Primo div</div> <!-- div div:first-of-type -->

<p>primo paragrafo</p>
<div>secondo div</div> <!-- div div:last-of-type -->
   <p>secondo paragrafo</p> <!-- p:nth-of-type(2) -->
</div>

Pseudo-Elementi CSS

Gli pseudo-elementi sono degli elementi che non esistono nel linguaggio di markup html, ma vengono creati tramite dei selettori css e sono ::after e ::before.
L’unica differenza tra i due è che con “after” il contenuto creato con il linguaggio css si posizionerà dopo l’elemento interessato, mentre con “before”, prima.

Prova a inserire questo codice all’interno del tuo foglio di stile css.

h1::before {
   content: ‘prima’;
}

h1::after {
   content : ‘dopo’;
}

Come puoi notare, ai fianchi del tuo titolo si sono aggiunti la parola “prima” a sinistra e “dopo” a destra.

Attraverso la proprietà content puoi, quindi, specificare il contenuto dello pseudo-elemento, vediamo quali sono i possibili valori da inserire:

testo – Puoi inserire qualsiasi tipo testo come valore del content e questo apparirà prima o dopo l’elemento
immagine – Puoi inserire come valore l’url di un’immagine (content : url(percorso/per/immagine.jpg)), questa, verrà inserita con le esatte dimensioni dell’immagine e non sarà possibile ridimensionarla, per questo motivo non è molto utilizzato.
niente – (content : “”)Possiamo inserire un contenuto vuoto se vogliamo creare un elemento grafico oppure un elemento con una dimensione prestabilita e un’immagine di sfondo.

Ma pseudo-classi e pseudo-elementi non sono le uniche cose in grado di conferire del movimento al tuo sito web. Curioso di sapere cos’ altro può aiutarti in tal senso?? Vediamolo insieme nella prossima guida!

Guide per aspiranti programmatori