Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » I selettori nei fogli di stile

I selettori nei fogli di stile

di Luca Mascaro, 08 Giugno 2004

Versione Stampabile

L'articolo proviene da Lucamascaro.info ed è stato riprodotto per gentile concessione dell'autore.


In questo articolo troverete la prima guida completa in italiano a tutti i selettori (o puntatori) presenti nei fogli di stile.

Per capirci meglio i selettori sono la base della logica SAX a eventi, che sta anche alla base di XSL/XSLT e che viene sfruttato in vari framework xml come apache cocoon, Microsoft .net e alcuni parser Java per XML.

In pratica ogni documento è un insieme di oggetti DOM gerarchizzati secondo logica ove ogni elemento nel motore di rendering del browser ha un attributo di stile di default, quando il documento è completamente in memoria gli stessi nodi sono disponibili secondo una logica di puntamento DOM, dove navigando tra i nodi riusciamo a manipolarne gli attributi o il contenuto, questo però deve già essere caricato nella memoria del browser (non la cache ma la memoria di lavoro).

La logica SAX invece è ad un livello più astratto basato su eventi, in pratica il parser memorizza tutti gli eventi che conosce e quando gli arriva un nodo o una serie di nodi ben precisa, senza bisogno che sia caricato l'intero documento, quest'ultimo viene manipolato secondo le istruzioni indicate nel comando SAX.

Per dirlo semplicemente quando noi in un CSS indichiamo:

body{ color: blue; }

non diciamo nient'altro che quando il browser legge per la prima volta l'evento "body" deve attribuire a lui e a tutti i suoi figli l'attributo colore a blu salvo comando contrario successivo, infatti in SAX un comando successivo sovrascrive uno precedente.

Quello che in quest'articolo verra trattato e studiato sono i selettori di eventi, praticamente nell'esempio precedente quel "body" che attivava l'evento, e scopriremo che i css sono molto potenti in questo ambito e permettono di risparmiare una quantità immensa di codice se ben studiati nella loro struttura.

Ricordo che il supporto dei css da parte dei browser è oramai abbastanza diffuso fino al livello 2.1.

Ricordo anche che ogni successivo comando può essere mischiato e dichiarato secondo qualunque ordine o forma, in modo da creare puntatori SAX il più precisi possibili (vedere esempio alla fine).

Attenzione, nei testi support si adotteranno abbreviazioni come IE4+, vuol dire che il supporto da parte di Internet Explorer parte dalla 4, ~ vuol dire supporto parziale.

Ultima nota pratica e che per motivi di tempo non mi è stato possibile testare su tutti i browser, quindi mi sono limitato a partire dalle versioni 4 per chi le ha, inoltre quando non ero sicuro al 100% del funzionamento (perchè i test mi lasciavano dubbioso) ho indicato la versione da dove il funzionamento è garantito, almeno sul mio computer.

I selettori nei CSS 1

I css 1 sono diventati raccomandazione il 17 dicembre 1996 e sono stati integrati quasi subito come supporto, praticamente ogni browser dalla versione 4 li supporta, l'unico problema è la loro limitata potenza di formattazione che a quel tempo era concepita solo a scopo decorativo.

HTML BODY {

Questo è il selettore più semplice, in pratica indica un elemento o una serie precisa di elementi che se corrisponde nell'html, fa scaturire l'evento. L'elemento figlio (BODY) deve essere solo discendente del padre, in qualunque posizione da esso, inoltre non vi sono limiti alla sequenza di elementi.

HTML BODY TABLE TD{ color: blue; }

Supporto: IE 4+, NS 4+, Opera 4+, Moz 1+, Safari 1.0+

HTML, BODY {

Questo è il metodo grouping, non è un vero selettore e solo per indicare che è possibile assegnare gli stessi attributi a più selettori contemporaneamente.

HTML BODY, TABLE TD{ color: blue; }

Supporto: IE 4+, NS 4+, Opera 4+, Moz 1+, Safari 1.0+

#nomeid {

Il selettore di ID identifica un elemento preciso e univoco nell'html che possiede l'attributo ID con lo stesso valore presente dopo lo sharp #, non può esistere più di un elemento ID identico in un documento html valido.

#coloreblu{ color: blue; } P#coloreblu{ color: blue; }

Supporto: IE 4+, NS 4+, Opera 4+, Moz 1+, Safari 1.0+

.nomeclasse {

Il selettore di classe identifica in pratica la serie di elementi che possiede l'attributo html class con lo stesso valore di quello presente dopo il punto, al contrario di ID le classi possono avere molteplici elementi.

.coloreblu{ color: blue; } P.coloreblu{ color: blue; }

Supporto: IE 4+, NS 4+, Opera 4+, Moz 1+, Safari 1.0+

A:link, A:visited, A:active {

Le pseudoclassi per le ancore sono un nuovo tipo di classe che identificano un evento dentro un evento a livello DOM, in pratica la pseudoclasse link indica il comportamento di un "A" quando possiede l'attributo href, visited quando è stato già visitato il referrer e active quanto il mouse preme sull'ancora. Questi eventi si attivano quando il DOM è già stato caricato in memoria del browser.

a:link, a:visited{ color: blue; } a.nomeclasse:link{ color:blue; }

Supporto: ~IE 4.5+, NS 4+, Opera 4+, Moz 1+, Safari 1.0+

P:first-line, P:first-letter {

Le pseudoclassi tipografiche sono un tipo di classe non legate ad eventi DOM, ma che identificano posizioni all'interno del contenuto dell'oggetto principali, first-line identifica la prima linea di testo mentre first-letter la prima lettera.

P:first-line{ color: blue; } P.nomeclasse:first-letter{ font-size: 2em; }

Supporto: IE 5+, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

@import url

Questo comando non è un selettore ma va scritto come un selettore, in pratica permette di caricare altri css dentro il primo permettendo così una modularizzazione degli stessi.

@import url(stile2.css)

Supporto: IE 5.5+, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

I selettori nei CSS 2 e 2.1

I CSS 2 sono diventati raccomandazione il 12 maggio 1998 e da un po di tempo sono in revisione con la versione 2.1, nonostante questa volta siano molto potenti in formattazione e permettano di creare layout table less con molta facilità la loro implementazione è avvenuta solo ultimamente con browser di 5a o 6a distribuzione. Nei CSS 2 già si parlava di XHTML e quindi l'ideale per i puntatori è la forma minuscola, quindi da adesso proseguiremo così, inoltre non ripeteremo i selettori che non hanno subito modifiche.

body * {

Il selettore universale introdotto nei css 2 permette di puntare un evento presso qualunque elemento, in questo modo è possibile creare combinazioni ancora più universali, anche se pensandoci bene non ha uno scopo vero e proprio.

p * a{ color: blue; }

Supporto: IE 5+, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

body > p{

Il selettore child permette di identificare un elemento figlio diretto del padre senza ulteriori discendenze intermedie.

body > p{ color: blue; }

Supporto: IE not, NS 6+, Opera 5+, Moz 1.1+, Safari 1.0+

h1 + h2 {

Il selettore somma permette di identificare due o più elementi che si susseguono direttamente nel codice senza alcun intervallo nel mezzo, mettendo così una regola di vicinanza.

h1 + h2{ color: blue; }

Supporto: nessun supporto riscontrato.

p[lang] {

Il selettore di attributi è uno dei selettori previsti tra i più potenti, infatti permette d'identificare la presenza di un attributo all'interno di un tag, è possibile anche sommare questi selettori su un unico tag. Questo permette di risparmiare diverso codice se ben sfruttato.

Dato un codice html:
< p lang="en" title="ecco un testo"> testo </p>
lo identifichiamo così:
p[lang]{ color: blue; }
o se vogliamo essere più precisi
p[lang][title]{ color:blue; }

Supporto: IE not, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

p[lang='en'] {

Il selettore di valore di attributi è uno dei selettori previsti tra i più potenti, ancora più del precedente, infatti permette d'identificare la presenza di un attributo all'interno di un tag e il suo valore specifico completo, è possibile anche sommare questi selettori su un unico tag. Questo permette di risparmiare diverso codice se ben sfruttato.

Dato un codice html:
< p lang="en" title="ecco un testo"> testo </p>
lo identifichiamo così:
p[lang='en']{ color: blue; }
o se vogliamo essere più precisi
p[lang='en'][title]{ color:blue; }

Supporto: IE not, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

p[title~='testo'] {

Il selettore di stringa in un valore di attributi è il selettore a mio vedere più potente, infatti permette d'identificare una stringa precisa dentro un attributo all'interno di un tag e il suo valore specifico completo, è possibile anche sommare questi selettori su un unico tag. Questo permette di risparmiare diverso codice se ben sfruttato.

Dato un codice html:
< p lang="en" title="ecco un testo"> testo </p>
lo identifichiamo così:
p[title~='testo']{ color: blue; }
o se vogliamo essere più precisi
p[lang='en'][title~='testo']{ color:blue; }

Supporto: IE not, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

p[lang|='en'] {

Il selettore in stringa di un valore di attributi è l'ultimo selettore in categoria, permette d'identificare una stringa precisa in un altra stringa dentro un attributo all'interno di un tag e il suo valore specifico completo, è possibile anche sommare questi selettori su un unico tag.

Dato un codice html:
< p lang="en-us" title="ecco un testo"> testo </p>
lo identifichiamo così:
p[lang|='en']{ color: blue; }

Supporto: IE not, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

.nuovonomeclasse {

Con l'introduzione dei css 2 e dei selettori di stringa, il selettore di classe è stato notevolmente potenziato permettendo la gerarchizzazione e la somma delle stesse.

L'html poteva essere scritto così
< p class="classe1 classe2"> testo </p>
e il css mutava così
.classe1.classe2{ color: blue; }

Supporto: IE 5+, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

p:first-child {

La pseudoclasse first-child è stata integrata nei CSS 2 per identificare il primo elemento presente in un elemento padre con più figli, in modo da poter migliorare ancora di più la rappresentazione grafica dei layout.

body p:first-child{ color: blue; }

Supporto: IE not, NS 7+, Opera 5+, Moz 1.1+, Safari 1.0+

a.nomeclasse:link, a.nomeclasse:visited{

Nei CSS2 le pseudoclassi per le ancore sono diventate solo due (active è passata sotto le globali), inoltre è stato aggiunto il supporto di classe o id non previsto in precedenza che permette di aggiungere la pseudoclasse a qualunque selettore supportato.

a.nomeclasse:link{ color: blue; } a#nomeid:link

Supporto: IE 5+, NS 6+, Opera 5+, Moz 1+, Safari 1.0+

:hover, :active, :focus{

Con l'introduzione dei CSS 2 sono state anche introdotte le pseudoclassi dinamiche che azionano un evento solo a DOM caricato, e che permettono di interagire direttamente con gli eventi provocati dall'utente in teoria su qualunque elemento html e non solo sulle ancore. La pseudoclasse :hover permette di identificare l'evento di passaggio con il mouse, quella :active la pressione del mouse e quella :focus il passaggio della tabulazione. Queste pseudoclassi permettono di creare effetti visivi dinamici e possono anche essere annidiate tra loro.

a:hover{ color: blue; } a:active{ color: red; } a:focus{ background: yellow; } a:focus:hover{ background: gray; }

Supporto: ~IE 5+, NS 6.2+, ~Opera 5+, Moz 1.1+, Safari 1.0+

:lang(en) {

Il selettore pseudoclasse :lang serve a identificare precisi mutamenti nella struttura linguistica del documento evidenziandoli basandosi sul rapporto |=, questo selettore è molto importante per l'accessibilità di un documento.

*:lang(en){ color: blue; }

Supporto: IE not, NS 7+, Opera not, Moz 1.1+, ~Safari 1.0+

:before, :after {

I selettori pseudoclasse di posizione servono ad un utilizzo specifico per la modifica del contenuto grazie all'attributo content, in pratica permettono di modificare l'html in modo dinamico attraverso i fogli di stile.

a:before{ content: " [" attr(href) "] "; }

Supporto: IE not, NS 7, Opera5+, Moz 1.1+, Safari 1.0+

I selettori nei futuri css 3 (Candidate Raccomandation)

I css 3 sono stati candidati alla raccomandazione tra la fine del 2001 e oggi in tutti loro moduli e sono in continua revisione. Questa volta siamo di fronte a i fogli di stile definitivi ideali sia per il web semantico sia per il mondo XML, che ci permettono di controllare qualunque evento di un browser e di creare vere e proprie webapp solo tramite loro e l'xhtml. Chiaramente il loro supporto non è ancora esistente se non per qualche comando su Mozilla/Netscape e su Safari quindi in questa sezione non indicherò la parte di supporto visto che ufficialmente non sono ancora raccomandazioni da implementare.

@namespace foo url(http://www.foo.org)

La prima introduzione significativa nei CSS 3 è il concetto di namespace, concetto base del web semantico e applicatissimo in XML, in pratica si indica uno spazio logico di nomi tramite un URN che spiega in che logica semantica si tratta il contenuto del sito, quindi è stato implementato il puntatore di namespace per aumentare la precisione degli stessi puntatori.

Dichiarazione:
@namespace foo url(http://www.foo.org);
elemento con o senza namespace (globale):
p { color: blue; }
un elemento con namespace:
foo|p { color:blue; }
tutti gli elementi di un namespace:
foo|* { color: blue; }
un elemento senza namespace:
|p { color: blue; }
un elemento con qualunque namespace:
*|p { color: blue; }
tutti gli elementi:
*|* { color:blue; }
tutti gli elementi senza namespace:
|* { color: blue; }

p[attr^='val'], p[attr$='val'], p [attr*='val'] {

I selettori di sottostringa introdotti nei CSS 3 permettono il controllo più specifico nelle stringhe, e ne esistono di 3 tipi. Il primo tipo ^ permette il controllo all'inizio del valore, il $ solo alla fine, mentre l' * in qualunque punto della stringa. Come ogni cosa nei CSS 3 vanno integrati con il concetto di namespace.

object[type^='image/']{ color: blue; } a[href$='.pdf']{ color: red; } p[title*='ciao']{ color:blue; }

*:target {

La pseudoclasse target permette di evidenziare il bersaglio di un ancora interna alla pagina una volta richiamata, identificandola ad evento avvenuto. Questo attributo è già supportato da NS e Mozilla.

*:target { background-color: yellow; }

:enable, :disable {

Queste pseudoclassi sono state introdotte per gli eventi sui formulari e indicano praticamente gli eventi di stato di un bottone form.

input:enable{ color: blue; }

:checked, :indeterminated {

Queste pseudoclassi sono state introdotte per evidenziare lo stato ottico delle checkbox nei form, è possibile evidenziare quelle non ancora determinate o trattate con :indeterminated o quelle selezionate con :checked.

input:checked{ color: blue; }

I selettori strutturali

Questa è la vera grande novità dei CSS 3, in pratica la possibilità tramite selettori di determinare nodi ben precisi o serie di essi potendoli poi manipolare a piacere. Nella dimostrazione sottostante è spiegato il funzionamento generale di questi selettori pseudoclassi per l'identificazione strutturale nel DOM di un documento.

il selettore di base, permette di identificare il nodo base di un DOM:
*:root { color: blue; }
il selettore di figlio numerico, permette per esempio di alternare il colore di una serie di paragrafi:
p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; }
esiste poi il selettore numerico che parte dalla fine, per esempio per evidenziare le ultime colonne di una tabella:
tr:nth-last-child(-n+2)
esiste anche il selettore di tipo, per esempio per alternare un floating:
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }
esiste il selettore di tipo che parte dalla fine:
img:nth-last-of-type(2n+1) { float: right; } img:nth-last-of-type(2n) { float: left; }
oltre il vecchio :first-child è stato introdotto anche il selettore per l'ultimo figlio:
p:last-child{ color: red; }
è stato introdotto un selettore per identificare la prima ricorrenza di un tipo di nodo:
dl dt:first-of-type{ color: red; }
e anche il selettore per l'ultima ricorrenza:
dl dt:last-of-type{ color: red; }
altro selettore è quello per identificare tutti i figli di un nodo:
body:only-child{ color: red; }
il selettore per identificare gli elementi vuoti:
body:empty{ content: "vuoto"; }

p:content('stringa') {

La pseudoclasse di selezione content introdotta anchessa nei CSS 3 permette di identificare una stringa di testo all'interno del contenuto dell'oggetto che attiverà l'evento.

p:content('ciao') { color: blue; }

button:not([disabled]) {

La pseudoclasse di negazione è stata introdotta per creare anche eventi in forma di negazione, ciò può essere utile per esempio per dare uno stile a tutti i bottoni non disabilitati oppure a tutti le ancore senza href.

a:not(:link):not(visited) { color: blue; }

p::first-line, p::first-letter {

Nei CSS 3 molte pseudoclassi che non avevano funzione di puntare un oggetto preciso nel DOM del documento sono stati modificati e rinominati in pseudoelementi con una sintassi di selezione ::, quindi nei CSS 3 :first-line diventa ::first-line e :first-letter diventa ::first-letter (il supporto dei CSS 2 dovrebbe essere ancora garantito, ma l'uso è scorretto).

p::first-line { color: blue; } p::first-letter { color: red; }

p::selection {

Questo nuovo pseudoelemento permette allo sviluppatore di personalizzare l'evidenziazione che può fare l'utente sugli elementi di un blocco di testo.

p::selection { background: red; }

a::before, a::after {

Anche :before è :after subiscono una trasformazione in pseudoelementi nei CSS 3 cambiando sintassi in ::before e ::after.

a::before { content: "< questo è un link"; }

p ~ img {

Questo nuovo selettore si aggiunge a quello di adiacenza + dei CSS 2, e permette di avere una selezione di adiacenza non proprio perfetto, con uno o due elementi intermedi.

p ~ img { border: 1px solid red; }

Grammatica dei selector

Esiste inoltre una grammatica precisa per quanto riguarda le combinazioni di selector che nei CSS 3 si espande in modo esponensiale e che permette identificazioni precisissime e molto simili alle Regular Expression. Per maggiori informazioni la grammatica sulle reference ufficiali.

Altri comandi e forme di Fogli di stile

Sono in preparazioni ulteriori sintassi CSS, Page Media e @ rules per il controllo delle singole aree delle pagine e per la gestione migliore dei media di lettura, per maggiori informazioni consiglio la lettura dei seguenti documenti ufficiali.

Esempio finale

Documento infine un piccolo esempio pratico per capire l'uso attuale dei fogli di stile per formattare un documento XML valido al livello CSS 2.

Dato questo documento:

<?xml version="1.0"?> <document> <text id="testo1">ciao sono un testo di prova che vuole essere formattato grazie ad un foglio di stile secondo le specifiche CSS 2 in un browser standard compilant.</text> <text id="testo2">qui invece sono un altro testo di prova</text> </document>

Un possibile codice di formattazione potrebbe essere questo:

document{ background: gray;} document text{ color: black; border: .1em solid red; width: 10em; margin: 3em; } document text#testo1:first-letter{ font-size: 3em; float: left; } document text#testo2:first-line{ color: blue; }

ricordiamo che il foglio di stile va richiamato inserendo la seguente stringa dopo il comando d'apertura xml:

<?xml-stylesheet href="xml.css" type="text/css"?>

Nota

I bug riguardanti i css sono tantissimi, come anche le mancanze di supporto specialmente da parte dei browser di casa Microsoft, quello che però voglio notificare maggiormente è la scarsa potenza di memoria di explorer in generale, infatti explorer precarica tutte le combinazioni di eventi che identifica e se la condizione data è troppo complessa IE tenta o di svuotare memoria ignorando qualche attributo css, o si impianta di sana pianta.
Qui di seguito vi indico per esempio due condizioni che avevo usato proprio in questo sito ma che portavano al crash del browser ho al mancato rendering dei background:

#oggettobase #sottooggetto .seriedioggetti p:first-letter{ font-weight: bold; }
#oggettobase #sottooggetto.serieoggetti{ float: left; }

Spero con questa guida di aver chiarito molti dubbi sui selettori nei fogli di stile ed aver aiutato molti di voi a risparmiare codice.

Documentazione

Qui di seguito troverete tutte le reference ufficiali che parlano dei fogli di stile.

^Top

Dai un voto a questo articolo:   HITS: 1042 | VOTI: 1 | MEDIA VOTI: 1.0    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 5