I selettori class

Il selettore class è una forma di selettore di attributo molto utilizzata nell' attuale compilazione dei CSS. Aggiungendo un attributo class ad un qualunque elemento XHTML, non si fa altro che "etichettare" quell' elemento. Il codice, in una forma molto semplice, è il seguente:

Questo è il suo riferimento:

In questo caso ogni paragrafo con attributo class sarà rappresentato in blu. Si possono stilizzare tutti gli elementi dotati di attributo class con valore "nomeClasse" riscrivendo la regola nel seguente modo:

Si può applicare questo attributo a sezioni del codice indipendentemente dagli elementi standard, aggiungendolo ai tag <div> e <span> come scritto in qualche lezione precedente. Questi elementi non avrebbero modo di esistere senza i CSS e svolgono lo stesso compito se non che <div> si applica ad un elemento di blocco mentre <span> ad un elemento inline. Un uso tipico potrebbe essere:

I selettori class rappresentano, per la loro natura, strumenti molto potenti e flessibili, ma sarebbe meglio non "abusare" nel loro uso. I browser che non supportano i CSS non "daranno" le informazioni giuste che attraverso questi si vorrebbe comunicare. Sarebbe meglio, quindi, prima di aggiungere stili attraverso i tag <div> e <span> chiedersi se non c' è un altro elemento che lo possa fare. Riprendendo il codice precedente, sarebbe meglio adottare il seguente modo:

Cosa succede ora? Tutti gli elementi enfatizzati e contrassegnati di attributo "nomeClasse" diventeranno blu e, se visualizzati con browser sprovvisti di supporto CSS, manterranno il loro aspetto. Per fare in modo che il testo "Lorem ipsum dolor sit amet.........." non venga rappresentato in italico, come quasi tutti i browser trattano il tag <em> si può riformulare la regola in questo modo:

Porre attenzione quando si nomina una classe. Se si danno nomi generici, ma comprensibili, si eviterebbe di avere nomi di classi non più rappresentativi se si dovesse cambiare l' aspetto del foglio di stile. Aver nominato la classe precedente "testoRosso" potrebbe avere un senso ora, ma non in futuro se si decidesse di trasformare quel testo in verde.
Si possono definire anche selettori class che si riferiscono a sottogruppi di elementi che presentano più di un valore nell' attributo. Nell' esempio seguente ogni elemento ha una lista di valori, separati da uno spazio, associata all' attributo:

Se venisse dichiarato lo stile di seguito riportato tutti gli elemenmti dell' esempio sarebbero visualizzati in blu:

Selettori ID

Il selettore ID è molto simile al class, ma con una differenza importante. La regola può essere applicata solo una volta, poichè ogni attributo ID, in una pagina web, deve essere unico. Di solito sono utilizzati per applicare uno stile a box specifici. Differiscono, nei CSS, dai selettori class utilizzando "#" invece che il " . ". Ecco un esempio:

Pseudo-class e pseudo-elementi

Permettono di selezionare parti del codice XHTML a prescindere da come esso sia strutturato. Gli pseudo-class hanno a che vedere con le caratteristiche degli elementi; gli pseudo-element con la struttura che esiste all' interno del documento ma che non è strutturata come elemento. Vediamo qualche esempio per comprendere meglio questi concetti.

Pseudo-class

Pseudo-class del primogenito (first-child)

Questa pseudo-class si applica ad un elemento primogenito. Si vorrebbe definire lo stile del primo paragrafo di uno dei nostri <div> differenziandolo con un margine indentato o in corsivo. Siccome il paragrafo è "figlio" di un <div>, questo selettore permette di etichettare questo paragrafo senza dover aggiungere attributi class nel codice XHTML. Il codice seguente stilizza ogni elemento paragrafo primogenito.

Scritto in questo modo, tale codice stilizzerà tutti i paragrafi primogeniti contenuti nei <div>, ma anche tutti i paragrafi primogeniti che stanno fuori dai <div>. Per riferisci a "quell' elemento" si deve scrivere in questo modo:

Utilizzando la pseudo-class first-child con un selettore discendente, si può risolvere un problema creato dall' esempio precedente; è stato stilizzato un paragrafo in italico, cosà come i browser intendono il tag <em>. Il seguente codice seleziona tutto il testo inserito nel paragrafo primogenito:

Da notare che un paragrafo, per essere etichettato, deve essere il primogenito del <div>; se ci fosse stato un titolo o un altro elemento davanti al primo paragrafo, questo non avrebbe ricevuto lo stile.

Pseudo-class delle ancore

Questo gruppo di regole pseudo-class descrive i diversi stati dei link in modo tale da poterli stilizzare individualmente.

Il link può essere un normale <a href="http://www.Sito.it">, senza avere nessuna classe associata nel codice in quanto il browser è in grado di capire che questo stato esiste. Una cosa molto importante: affinchè gli stati dei link possano "partire" nello stesso tempo, si deve rispettare l' ordine che definisce la gerarchia. L' esempio è il codice scritto più su. È possibile combinare queste pseudo-class con i selettori, in modo tale da poterle differenziare. Se si aggiunge ad un selettore class la regola:

si può applicare un colore distinto ad ogni link esterno al proprio sito, cambiando il tag in questo modo:

Aggiungendo un selettore contestuale alla regola, si può applicare un particolare stile alle immagini che rappresentano un link:

Pseudo-elementi

Gli pseudo elementi sono simili alle pseudo-class first-child per il fatto che, anche loro, si riferiscono alla posizione che occupano nel documento. Sono considerati pseudo-elementi e non pseudo-class perchè si comportano come se il codice selezionato fosse identificato tramite tag come un elemento, quando invece non lo è .

Pseudo-elemento di inizio riga (first-line)

Permette di ottenere la convenzione tipografica di enfatizzare la prima riga di un paragrafo, ma si può applicare a qualunque elemento, a livello di blocco. L' aspetto delle regole è simile a quello delle pseudo-class:

Lo pseudo-elemento first-line ha un suo set di proprietà:

• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-shadow
• text-transform
• vertical-align
• word-spacing

Pseudo-elemento del capolettera (first-letter)

Permette di enfatizzare la prima lettera di un paragrafo, ma può essere applicato a qualunque elemento, a livello di blocco.

Lo pseudo-elemento first-letter ha un suo set di proprietà:

• background
• border
• clear
• color
• float
• font
• line-height
• margin
• padding
• text-decoration
• text-shadow
• text-transform
• vertical-align