I selettori che possiamo utilizzare nel CSS sono moltissimi e in continuo aggiornamento. Cominciamo a studiare i più semplici, per poterli utilizzare da subito.

Come ricorderai, il selettore è ciò a cui voglio modificare l'aspetto attraverso i fogli di stile.


1. In primo luogo, ciascun tag del linguaggio html può essere utilizzato come selettore nei fogli di stile: è sufficiente scrivere il nome del tag, seguito dalla dichiarazione (proprietà e valori) specificate tra parentesi graffe: ecco qualche esempio:

Con questo codice andiamo a modificare lo stile dell'intera pagina html, in quanto il tag body la racchiude interamente tutta:
<style>
body
{proprietà:valore;}
</style>

Con questo invece andremo a modificare tutti i tag div di una pagina, nessuno escluso:
<style>
div

{proprietà:valore;}

</style>



Esattamente allo stesso modo, utilizzando il semplice nome del tag (e quindi senza aggiungere o anteporre nulla), andremo a modificare tutti i singoli tag di quel tipo; in questo caso verranno modificate tutte le immagini:


<style>

img

{proprietà:valore;}

</style>


Mentre in questo tutte le liste numerate:

<style>

ol

{proprietà:valore;}

</style>




2. Il secondo modo è quello di selezionare, attraverso le classi o gli identificatori, un gruppo o un singolo tag a cui applicare le modifiche di stile.
Per modificare lo stile di tutti i tag che appartengono ad una certa classe, dobbiamo scrivere il nome della classe assegnata, preceduto da un punto; se, ad esempio, la classe assegnata è denominata "ciao" dovremmo scrivere nel nostro foglio di stile questo codice:


<style>

.ciao

{proprietà:valore;}

</style>


Se la classe "ciao" è stata assegnata a diversi tipi di tag (div, span, p), a tutti verrà dato lo stile specificato nella dichiarazione.


Per modificare invece lo stile del tag a cui abbiamo assegnato un identificatore, dobbiamo scrivere il nome della classe assegnata, preceduto dal cancelletto; se, ad esempio, la classe assegnata è denominata "unico" dovremmo scrivere nel nostro foglio di stile questo codice:

<style>

#unico

{proprietà:valore;}

</style>




3. Tramite CSS, possiamo dare una stessa regola di stile anche a più tag, classi o identificatori contemporaneamente, senza dover riscrivere le dichiarazioni più volte.

Per ottenere questo effetto è sufficiente che scriviamo i selettori che ci interessa modificare separandoli con la virgola:


<style>

p, span, .prima, #notabene

{proprietà:valore;}

</style>


In questa regola, le proprietà e i valori specificati all'interno delle parentesi graffe verranno applicate a tutti i paragrafi, a tutti gli span, a tutti i tag con classe "prima" e al tag con identificatore "notabene" presenti nella pagina html.