La gestione di CSS è limitata all’uso di classi assegnati a uno o più elementi di una pagina, le pseudo-classi permettono di modificare il comportamento a seconda dello stato di un elemento, la sintassi prevede l’uso di creare una classe dove oltre al nome si indica, con due-punti, il nome della pseudo-classe. Uno dei semplici utilizzi di questa tecnica è il cambiare colore di un link quando il mouse passa sopra, questo comportamento può essere regolato con l’uso della pseuso classe “hover”

a { color: blue; }
a:hover { color: #FF00FF; }

L’elenco completo di tutte le classi è disponibile al sito di mozilla  ma bisogna ricordare che non tutte le classi sono disponibili in tutti i browser.

I più comuni e più usati sono:

• :empty usato per modificare l’aspetto di elementi vuoti
• :focus :disabled :enabled :checked :invalid :read-only usati per determinare lo stato di un input e modificarne l’aspetto e il comportamento
• :first-child :last-child :last-of-type usato per modificare l’aspetto del primo o dell’ultimo figlio di un elemento
• :is() :not() usato per modificare l’aspetto di elementi con caratteristiche specifiche condizionali
• :nth-child() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() usato per modificare l’aspetto degli elementi di un gruppo
• :only-child usato per modificare l’aspetto di un oggetto se unico figlio del suo contenitore
• :root usato per modificare l’aspetto dell’oggetto principale, spesso usato per identificare il tag HTML radice di un documento

La documentazione ufficiale è disponibile, come sempre, nel sito della w3schools. In particolare il gruppo dei nth è usato per gestire i gruppo di figli come righe di una tabella, elementi di una lista o semplici elementi dentro ad un altro elemento, un uso semplice è andare posizionali, per esempio volendo colorare il quarto elemento:

tr:nth-child(4) td {background-color: red}

questa tecnica è usata per distinguere poi elementi alla posizione pari da quelli alla posizione dispari con:

tr:nth-child(even) tr:nth-child(2n) 
tr:nth-child(odd) tr:nth-child(2n+1)

Ed è possibile selezionare un elemento partendo dal fondo , per esempio per colorare di giallo il penultimo elemento di un gruppo

tr:nth-last-child(2) td { background-color: yellow}

La pseudo-classe target consente di selezionare un elemento della pagina che corrisponde ad un indirizzo: data una pagina con delle ancore al proprio interno, la pseudo-classe E:target ci consente di assegnare uno stile all’elemento di destinazione nel momento in cui è selezionato. Un esempio per comprenderne il funzionamento partendo dal codice dove al click di un link viene evidenziato in rosso il blocco sottostante:

<style>
  div:target {color:Red;}
</style>
<ul>
  <li><a href="#div1">Div1</a></li>
  <li><a href="#div2">Div2</a></li>
  <li><a href="#div3">Div3</a></li>
  <li><a href="#div4">Div4</a></li>
</ul>
<div id="div1"><p>Testo1 ....</p></div>
<div id="div2"><p>Testo2 ...</p></div>
<div id="div3"><p>Testo3...</p></div>
<div id="div4"><p>Testo4 .... </p></div>

Con le pseudo-classi logiche è possibile creare delle mini-condizioni con gli operatori is e not, per esempio è possibile usare not in combinazione con altri pseudo-classi, per esempio:

input:not(:disabled){color: black;}

per modificare l’aspetto di elemento che non hanno determinate caratteristiche. Ma è possibile usare la stessa tecnica per creare logiche sulle classi, cioè selezionare elementi che non hanno determinate classi:

div{color:white;}
div:not(.white) {color: black}

Gli pseudo-elementi son un’altra tecnica che prevede l’uso di parole chiave per modificare l’aspetto di parti di un elemento, rispetto alle pseudo classi che modificano tutto l’elemento, da CSS3 gli pseudo-elemento si differenziano dalle pseudo-classi perché si usano due caratteri di due punti :: invece che uno solo, per mantenere la retro-compatibilità con il codice esistente, i browser sono tenuti a supportare entrambe le sintassi, la più comuni sono:

::before
::after
::first-letter
::first-line

Gli pseudo-elementi sono supportati, salvo qualche dettaglio di ::before e ::after, da tutti i principali browser. Le prime due permettono di creare elementi prima o dopo un elemento, per esempio:

#element:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
}
...
<div id="element">ciao</div>

Questo semplice esempio, prima del div, aggiunge un elemento vuoto ma di larghezza e altezza come indicato nella classe, bisogna però sempre ricordarsi di mettere la proprietà content anche se vuota in quanto omettendola alcuni browser non creano nessun elemento. Inoltre bisogna sempre ricordare che l’elemento inserito con questa tecnica è un elemento in-line per dare un volume all’elemento ma talvolta è necessario definirlo esplicitamente come un elemento a livello di blocco (con display:block). L’uso di before e after è anche condizionato dal fatto che, il contenuto che viene inserito attraverso i CSS, sarà un contenuto figlio in relazione all’elemento e ma verrà posizionato prima oppure dopo di qualsiasi altro contenuto in quell’elemento e mentre si sviluppa con questi pseudo-elementi bisogna considerare che non sono “reali” perché non fanno parte del documento DOM, quindi non bisogna mai utilizzare gli pseudo-elementi per generare contenuti dinamicamente o che siano fondamentali per l’usabilità o l’accessibilità delle pagine perché rischiano di sparire e non tutti i browser si comportano bene con questi elementi. Personalmente gli evito se posso.