Utilizzo delle pseudo-classi

Pseudo-classi correlate alla posizione/numero

:root applichiamo per esempio uno sfondo di colore #C6D100 all'elemento radice, ossia il tag <html> del documento HTML che state leggendo.
:first-child , :last-child e :nth-child(2):
- Sono il Primo
- Io invece sono il Secondo (2)
- Eccomi, sono il Terzo
- Indipendentemente da quanti siamo, sono sempre Ultimo
:nth-child(2n+1), dove n è il numero di partenza partendo da 2 e viene incrementato di 1. Perciò, questa regola seleziona tutti gli elementi dispari (odd): in questo caso è equivalente a scrivere nth-child(odd), così come per i pari si scrive nth-child(even)
- Sono Dispari
- Io invece sono Pari
- Eccomi, sono Dispari
- Io sono Pari
:nth-of-type(N) applicare i CSS a un elemento numerato di un certo tipo. Per esempio: li:nth-of-type(2) seleziona il secondo di quel tipo, in questo modo:
- Sono il primo li
- Io invece sono il secondo li
- Eccomi, sono terzo li
- Io sono quarto
:first-of-type applica i CSS solo al primo elemento di quel genere, contenuto in ciascun padre. Per esempio, se ci sono due strong consecutivi, applica la regola solo al primo:
- Contengo il primo testo evidenziato e il secondo
- Io contengo solo un testo
- Io no
- Io neppure
:nth-last-of-type(N) seleziona un elemento in base alla sua posizione partendo dal basso, per esempio nth-last-of-type(4) seleziona il quartultimo. Per selezionare gli ultimi tre: nth-last-of-type(-n+3).
- Primo
- Ultimi 3
- Ultimi 3
- Ultimi 3
:last-of-type Seleziona l'utlimo elemento di un genere:
- Primo li
- Secondo li
- Terzo li
- Sono sempre l'ultimo li
:only-child seleziona un elemento solo se è l'unico figlio del contenitore padre.
Lista con figli numerosi:
- Primo li
- Secondo li
- Terzo li
- Sono sempre l'ultimo li
Lista con figlo unico:
- li figlio unico
:only-of-type seleziona un elemento solo se esso è l'unico nel suo genere contenuto nell'elemento padre
- Primo li
- Secondo li
- Terzo li
  1. lista ordinata
- Sono sempre l'ultimo li

Pseudo-classi relazionali

:not(elemento | classe) applica una regola CSS solo agli elementi (o classi) che non sono specificati tra le parentesi:
- Primo li
- Secondo li
- Terzo li senza .classe
- Sono sempre l'ultimo li
:empty applica i CSS a un elemento solo se è vuoto:
- li figlio unico

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

:first-line definisce lo stile css della prima riga di un elemento:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
:first-letter definisce lo stile css del primo carattere di un elemento:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Pseudo-classi

:lang() applica uno stile a un elemento che usa una lingua specifica, per esempio :lang(en) per l'inglese. È quindi possibile mettere lang = "en" in un tag html e impostare gli stili solo per esso:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
::selection permette di cambiare lo stile del testo selezionato nel browser
:read-only seleziona gli elementi che sono read-only
:read-write seleziona la parte editabile in un elemento

Content-related pseudo-elementi

:before è in grado di aggiungere contenuti prima di un certo elemento:
Titolo con contenuto generato prima
:after è in grado di aggiungere contenuti, dopo un certo elemento:
Titolo con contenuto generato dopo

Utilizzo delle pseudo-classi

Pseudo-classi correlate alla posizione/numero

Pseudo-classi relazionali

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

Pseudo-classi

Content-related pseudo-elementi

Titolo con contenuto generato prima

Titolo con contenuto generato dopo