Selettori CSS

Selettori	Esempio	Descrizione
*	*	Seleziona tutti gli elementi.
element	h1	Seleziona tutti gli elementi <h1>.
#id	#box-1	Seleziona l'elemento che ha come attributo id='box-1'.
.class	.bg-red	Seleziona tutti gli elementi a cui è assegnata la classe 'bg-red' (class='bg-red').
selector1, selector2	h1, h2	Seleziona tutti gli elementi <h1> e tutti gli elementi <h2>.
selector1 selector2	#box-1 h2	Seleziona tutti gli elementi <h1> che sono discendenti dell'elemento con id='box-1'.
selector1>selector2	#box-1>p	Seleziona tutti gli elementi <p> che sono figli dell'elemento con id='box-1'.
selector1+selector2	h1 + p	Seleziona tutti gli elementi <p> immediatamente dopo un elemento <h1>.
selector1~selector2	h1 ~ p	Seleziona ogni elemento <p> preceduto da un elemento <h1>.
element.class	div.bg-red	Seleziona tutti gli elementi <div> a cui è assegnata la classe 'bg-red' (class='bg-red').

Pseudo Classi

Selettori	Esempio	Descrizione
:hover	#btn-1:hover	Si attiva quando l'utente interagisce con un dispositivo di puntamento sull'elemento con id=btn-1.
:link	a:link	Seleziona tutti i link non visitati.
:active	a:active	Seleziona tutti il link attivo.
:visited	a:visited	Seleziona tutti i link visitati.
:nth-child()	tr:nth-child(3)	Seleziona il terzo elemento <tr> di una tabella. Accetta anche i parametri 'odd' e 'even'' per selezionare elementi pari e dispari.

Selettori	Esempio	Descrizione
::after	p::after	Inserisci qualcosa dopo il contenuto di ogni elemento <p>.
::before	p::before	Inserisci qualcosa prima del contenuto di ogni elemento <p>.
::first-letter	p::first-letter	Seleziona la prima lettera di tutti gli elementi <p>.
::first-line	p::first-line	Seleziona la prima riga di testo di tutti gli elementi <p>.