ISSN 1722-375X
[Vai al menu di navigazione principale]


Home > Tutorial > Introduzione ai css > Introduzione ai CSS: I selettori

[Vai al piè di pagina]
TOC

Introduzione ai CSS

3. I selettori

I selettori servono a specificare a quale elemento del documento la regola debba essere applicata. I principali selettori sono:

3.1 Tag HTML

Ogni tag HTML è un selettore. Ad esempio:

p { text-indent: 2em; } 
a { font-weight: bold; }

Il codice sopra riportato specifica al browser che i paragrafi devono avere il capoverso con un rientro di due caratteri (come questo stesso paragrafo) e che i link devono essere in grassetto, migliorandone l'identificazione all'interno del testo.

3.2 Classi

Spesso si ha la necessità di associare ad uno stesso tag HTML diversi stili, per fare ciò è possibile ricorrere alle classi.

p.nota { font-size: small } /* carattere piccolo */
p.evidenzia { background-color: yellow; } /* area con sfondo giallo */

Le due classi sono nota ed evidenzia e vengono specificate separando il nome del tag e il nome della classe con un punto. La classe verrà specificata nel codice HTML attraverso l'attributo CLASS:

<p class="nota">Questo paragrafo è una nota</p>
<p class="evidenziato">Questo paragrafo è evidenziato in giallo</p>

La sintassi utilizzata specifica che la classe è associata al tag P. In questo modo è possibile associare lo stesso nome per classi associate a tag differenti:

CSS
p.nota { font-size: small } /* carattere piccolo */
span.nota { color: #999999; } /* testo in grigio */

(X)HTML
<p class="nota">Questo paragrafo è una nota</p>
<p>Testo normale (<span class="nota">nota nel testo</span>) testo normale ...</p>

Le classi possono anche essere associate a nessun tag HTML, in questo modo la stessa classe può essere associata a più selettori:

CSS
.nota { font-size: small } /* carattere piccolo */

(X)HTML
<p class="nota">Questo paragrafo è una nota</p>
<div class="nota">Questa sezione è una nota</div>

Nota bene: per ogni selettore è possibile associare una e una sola classe. Ad esempio non è valido il seguente codice:

p.classe1.classe2 { ... }

3.3 Identificatori

Gli identificatori sono simili alle classi, ma servono a definire un'entità unica all'interno del ducumento. Se le classi, come la parola stessa indica, definiscono un insieme di elementi concettualmente omogenei (ad esmpio le note di un testo possono essere accorpate nella classe note), l'identificatore deve definire un elemento che non si ripete all'interno del documento, ad esempio la nota per il copyright.

#nota-copyright { font-size: xx-small }

Il nome del identificatore deve essere preceduto dal carattere '#'. L'identificatore verrà specificato nel codice HTML attraverso l'attributo ID:

<p id="nota-copyright">Questo paragrafo è la nota per il copyright</p>

Nel codice HTML non devono esistere due tag HTML associati allo stesso identificatore, non possono dunque esistere due tag HTMl con lo stesso valore per l'attributo ID.

<p id="nota-copyright">Questo paragrafo è la nota per il copyright</p>
<p id="nota-copyright">E' errato inserire questo paragrafo</p>

3.4 Pseudo-classi e Pseudo-elementi

Pseudo-classi e pseudo-elementi sono classi ed elementi speciali, automaticamente riconosciuti dai browser che supportano i CSS (Mozzilla supporta maggiormente pseudo-classi e pseudo-elementi rispetto quanto non faccia Internet Explorer). Le pseudo-classi creano distinzioni fra elementi, ad esempio i link visitati e i link attivi sono distinti attraverso due pseudo-classi. Gli pseudo-elementi si riferiscono a sottoparti di elementi come il primo carattere di un paragrafo. La sintassi per specificare le regole da associare a pseudo-classi e pseudo-elementi è la seguente:

selettore:pseudoClasse { proprietà: valore }
selettore:pseudoElemento { proprietà: valore }

Come detto, pseudo-classi e pseudo-elementi sono automaticamente riconosciuti dai browser che supportano i CSS (il supporto può differire per i diversi browser), non è dunque necessario specificare nulla nel codice HTML. Si consideri il seguente esempio, relativo alle pseudo-classi:

A:link { color:  blue; }
A:visited { color: purple; }
A:hover { color: red; }
A:active { color: darkred; }

Il codice CSS indica al browser che i link devono essere blu, i link visitati devono essere viola, i link sui quali il puntatore del mouse si trova devono essere rossi (effetto roll-hover), i link attivi devono essere rosso scuro. Nel codice HTML non sarà necessario specificare nulla:

<a href="URL">questo link cambierà colore in base al suo stato</a>

Si consideri ora il seguente esempio, in cui verrà mostrato il funzionamento degli pseudo-elementi e come pseudo-classi e pseudo-elementi possano essere associati anche a classi e identificatori:

p#paragrafo-iniziale { text-indent: 0em; }
p#paragrafo-iniziale:first-letter { 
  font-size: 24px; 
  font-family: georgia;
  font-style: italic;
  float: left;
  margin:-5px 3px 0 0; 
}
p#paragrafo-iniziale:first-line { 
  text-transform: uppercase;
  font-style: italic; 
}
p { 
  font-size:10px;
  font-family: verdana;
  text-indent: 2em; 
  width: 300px; 
  text-align: justify 
}

Il codice sopra riportato utilizza due pseudo-elementi: first-letter e first-line, che selezionano la prima lettera e la prima riga di testo del selettore a cui sono associate, in questo caso il paragrafo di classe paragrafo-iniziale. Di seguito è riportato un esempio di codice HTML con cui utilizzare le regole specificate, si noti come non ci sia alcun accenno agli pseudo-elementi ma solo alla classe paragrafo-iniziale:

<p id="paragrafo-iniziale">Questo è il paragrafo iniziale [...]</p>
<p>Questo è un paragrafo normale [...]</p>
<p>Questo è un paragrafo normale [...]</p>

Per comodità è di seguito riportata un'immagine che riproduce il risultato su un browser (Mozzilla 1.0, in questo caso) che suppori i CSS. Si noti come la prima riga e il primo carattere del paragrafo associato alla classe paragrafo-iniziale abbiano caratteristiche diverse dal resto del testo, il risultato è stato ottenuto senza appesantire il testo se non per specificare quale fosse il paragrafo interessato d'interesse.

[immagine: Esempio per i codici CSS e HTML sopra riportati]

3.5 Selettori in cascata

Ci sono numerosi altri modi più o meno elaborati per specificare dei selettori, alcuni dei quali non supportati da browser largamente diffusi (ad esempio Internet Explorer 6 e inferiori). Un metodo ben supportato e molto utile e quello di utilizzare selettori in cascata:

selettore1 selettore2 { proprietà: valore }

In questo caso la regola si applica al selettore2 se questo è contenuto nel selettore1. Ad esempio si consideri il seguente codice:

code i { color: red; }

Questo codice specifica che il tag I, se inserito nel tag CODE, deve contenere del testo di colore rosso. Ad esempio, si consideri il seguente codice CSS:

<p><code>testo normale <i>testo corsivo</i> testo normale</code></p>
<p>testo normale <i>testo corsivo</i> testo normale</p>

La seguente immagine riproduce il risultato che si ottiene su un browser (Internet Explorer 6, in questo caso) che suppori i CSS:

[immagine: Esempio per i codici CSS e HTML sopra riportati]

3.6 Raggruppamento

Qualora più selettori dovessero rispettare le stesse regole, è possibile raggrupparli come segue:

h1, h2, h3, h4, h5, h6 { font-family: sans-serif }

Il codice sopra riportato è equivalente al seguente codice:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h4 { font-family: sans-serif }
h5 { font-family: sans-serif }
h6 { font-family: sans-serif }
TOC
G.T. -- ultima revisione: 03.10.2002


l'indirizzo di questa pagina è: http://www.constile.org/tutorial/introduzione_ai_css/sezione_3.php