Descrivi le pseudo-classi e i pseudo-elementi in CSS…

Le pseudo-classi e i pseudo-elementi ampliano le capacità dei selettori CSS, consentendo di applicare stili in base allo stato, alla posizione o ad altre caratteristiche degli elementi che non possono essere espresse con semplici selettori.

Pseudo-classi

Le pseudo-classi iniziano con due punti (:). Sono usate per stilizzare un elemento in uno stato specifico.

Principali pseudo-classi:

:hover - stilizza l'elemento al passaggio del mouse.
:active - stilizza l'elemento durante il clic (attivazione).
:focus - stilizza l'elemento che attualmente ha il focus (ad esempio, dopo aver cliccato su un link o un campo di input).
:visited - stilizza i link visitati.
:link - stilizza i link non visitati.
:first-child - stilizza il primo figlio del suo elemento padre.
:last-child - stilizza l'ultimo figlio del suo elemento padre.
:nth-child(n) - stilizza il n-esimo figlio del suo elemento padre. n può essere un numero, una parola chiave (even, odd) o un'espressione (2n+1).
:nth-last-child(n) - stilizza il n-esimo figlio a partire dalla fine.
:not(selector) - stilizza gli elementi che non corrispondono al selettore specificato.

/* Esempio di utilizzo delle pseudo-classi */
a:hover {
  color: blue; /* Cambia il colore del link al passaggio del mouse */
}

input:focus {
  border-color: green; /* Cambia il colore del bordo del campo di input al focus */
}

li:first-child {
  font-weight: bold; /* Stilizza il primo elemento della lista */
}

Pseudo-elementi

Gli pseudo-elementi iniziano con due punti (::). Sono usati per stilizzare una parte specifica dell'elemento o per inserire contenuto generato prima o dopo il contenuto dell'elemento.

Principali pseudo-elementi:

::before - inserisce contenuto generato prima del contenuto dell'elemento. Spesso usato con la proprietà content.
::after - inserisce contenuto generato dopo il contenuto dell'elemento. Richiede anche la proprietà content.
::first-letter - stilizza la prima lettera del blocco di testo.
::first-line - stilizza la prima riga del blocco di testo.
::selection - stilizza la parte dell'elemento che è stata selezionata dall'utente.

/* Esempio di utilizzo degli pseudo-elementi */
p::first-letter {
  font-size: 2em; /* Aumenta la prima lettera del paragrafo */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Aggiunge testo dopo il titolo */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Cambia lo sfondo del testo selezionato */
  color: black;
}

Storicamente, le pseudo-classi usavano un singolo due punti (:) per compatibilità con CSS2.1, mentre gli pseudo-elementi in CSS3 hanno iniziato a usare due punti (::) per una migliore distinzione. Si raccomanda di usare due punti per gli pseudo-elementi nel codice moderno.

Tabella di confronto:

Caratteristica	Pseudo-classe	Pseudo-elemento
Sintassi	`:selettore`	`::selettore`
Scopo	Stato dell'elemento	Parte dell'elemento o contenuto generato
Esempi	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Descrivi le pseudo-classi e i pseudo-elementi in CSS.