CSS - Selettori e Regole

Selettori

Fondamentalmente una regola CSS viene applicata ad un selettore, ovvero una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.

Com'è fatta una regola

Essa è composta da due blocchi principali:

1 - il selettore
2 - il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui verrà applicata la regola.

Il blocco delle dichiarazioni è delimitato da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:

1 - proprietà
2 - valore

Proprietà e valore devono essere separati dai due punti.

I selettori id e class

In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id.

Selettore class

In questa pagina abbiamo assegnato al paragrafo un attributo class="testoblu":

<p class="testoblu">....</p>

Il valore dell'attributo Class deve trovare una corrispondenza in un foglio di stile.
Qui si è definito un CSS incorporato creando un selettore di tipo Class e assegnado ad esso il nome testoblu:

<style type="text/css">
.testoblu {
font: 12px arial, Helvetica, sans-serif;
color: #0000FF;
}
</style>

Ora tutti i paragrafi con attributo class="testoblu" saranno dunque formattati come testo di colore blu, carattere arial e dimensione 12px.

Una singola classe infatti può essere assegnata a più elementi, anche dello stesso tipo.

Selettore id

Lo stesso meccanismo è valido per i selettori di tipo ID:

<p id="testoblu">....</p>

<style type="text/css">
#testoblu {
font: 12px arial, Helvetica, sans-serif;
color: #0000FF;
}
</style>

Tuttavia vi è una differenza fondamentale con il selettore "class": L'attributo id identifica un unico elemento all'interno della pagina: assegnando ad un paragrafo l'id "testoblu" dichiarato nel CSS, si trasformerà solo quello specifico paragrafo. 

In un documento potrò avere senza problemi questa situazione:

<p class="testoblu">....</p>
<div class="testoblu">....</div>
<table class="testoblu">...</table>
<p class="testoblu">....</p>
...

La classe .testoblu presente nel CSS formatterà allo stesso modo il testo del paragrafo, del div e della tabella.

Ma non questa:

<div id="testoblu">...</div>

Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Scrivendo due classi, una per il blu e una per il rosso, le applico di volta in volta secondo la necessità.
Se uno stile va applicato ad un solo elemento usate un ID. Se invece prevedete di usarlo su più elementi definite nel CSS una classe.

classe

Per definire una classe si usa far precedere il nome da un semplice punto:

.nome_della_classe

Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML.

Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe

Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso".
Il secondo tipo di sintassi va usato se si applica una classe ad uno specifico tipo di elemento (solo paragrafi o solo div...).
Se invece ritenete di doverla applicare a elementi diversi usate la sintassi generica.

Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple:

p.testorosso.grassetto {color:red; font-weight:bold;}

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:

<p class="grassetto testorosso maiuscolo">Blog dangerx82</p>
<p class="testorosso grassetto">Roma</p>

ma non questo, perchè solo uno dei nomi è presente come valore di class:

<p class="grassetto">Blog dangerx82</p>

id

La sintassi consiste nel far precedere il nome del selettore ID dal simbolo di cancelletto #:

#nome_id

Con questa regola:

#titolo {color: blue;}

Assegniamo il colore blue all'elemento che presenti questa definizione:

<h1 id="titolo">Blog dangerx82</h1>