In questo articolo impareremo ad usare i selettori css. Ma cosa sono i selettori? I selettori non sono altro che una indicazione, una selezione appunto, di uno o più elementi html sui quali poi si applicano le regole di stile.
Ecco un esempio di selettore:
selettore { proprietà: valore; proprietà: valore; proprietà: valore; }
I selettori possono riferirsi a:
- tipi
- ID
- classi
I selettori di tipo si riferisco a tutti gli elementi appartenenti allo stesso tipo. Ad esempio a tutti gli elementi di tipo “div” di una pagina oppure a tutti gli elementi “p” e così via… Il selettore va dichiarato semplicemente con il nome del tipo dell’elemento. Esempio
div { dichiarazioni } p { dichiarazioni } ....
I selettori di ID si riferiscono ad un solo elemento identificato univocamente in pagina con quel dato ID. Il selettore va dichiarato con il carattere ‘#’ che precede l’ID. Si usa per applicare uno stile un elemento univoco in pagina. Esempio:
#nome_id { dichiarazioni }
I selettori di classe si riferiscono a tutti gli elementi in pagina aventi quella data classe. Il selettore va dichiarato con il carattere ‘.’ che precede il nome della classe. Si utilizza per applicare uno stile comune a elementi aventi stessa classe. Esempio:
.nome_classe { dichiarazioni }
Casi particolari: il selettore universale:
Il selettore universale serve ad applicare le regole di stile a tutti gli elementi in pagina. Il selettore universale va dichiarato con il carattere ‘*’. Esempio:
* { dichiarazioni }