Adriano - racconti e altro

Selezionare gli elementi

Come dicevo in precedenza, un foglio di stile è composto da una serie di regole, ciascuna delle quali è a propria volta composta da due parti: un selettore e un blocco di proprietà, che dovranno essere applicate a quel selettore. Il blocco di proprietà è racchiuso tra parentesi graffe e ne parlerò nei prossimi capitoli; il selettore, invece, è ciò che precede la prima parentesi graffa ed è ciò di cui parlerò adesso.

Quando scriviamo una regola del CSS, prima di tutto dobbiamo selezionare uno o più elementi della nostra pagina, a cui quella regola sarà applicata; fatto questo, elencheremo tutte le angherie a cui vogliamo sottoporre il suddetto elemento. Quindi,
p {
  //formattazioni da applicare al paragrafo
}
è la struttura base di una regola.

Come possiamo vedere, tutto il lavoro parte dalla selezione degli elementi che desideriamo modificare. Quali elementi selezionare e come selezionarli? Lo scopriremo adesso.

3-1 Selezione per tag

Il sistema più semplice di selezione è la selezione per tag. Prendiamo uno dei tag presenti nella pagina da modificare, rimuoviamo dal suo nome le parti < e > e otterremo il selezionatore per quel tag: per selezionare i tag <p>, dunque, scriveremo p, per il tag <h3> scriveremo h3, e così via. Con la selezione per tag, noi selezioniamo tutti i tag di quel tipo, presenti nella nostra pagina, e vi applichiamo le varie regole. Di conseguenza, la regola
p {
  text-align: justify;
}
seleziona tutti i tag <p> presenti nel file a cui è applicata e li modifica in base alla proprietà che noi abbiamo indicato (nel caso in esempio, text-align: justify;). Tradotta in italiano, una regola di questo tipo significa: “ogni volta che trovi un tag <p>, formatta il contenuto di quel tag, giustificandolo”. Non ha importanza quale sia la struttura della pagina: tutti i tag <p> che contiene saranno formattati in quel modo, senza eccezioni.

La selezione per tag è dunque un sistema molto potente, per formattare una pagina, e può essere un ottimo modo per cominciare il lavoro. Da sola, tuttavia, non è sufficiente, soprattutto perché presenta alcuni spiacevoli effetti collaterali. Se nel nostro foglio di stile noi scriviamo, ad esempio, una regola del tipo
body {
  background-color: yellow;
}
tutti i files che utilizzano quel foglio di stile (potenzialmente tutti i files da cui è composto il nostro libro) appariranno con uno sfondo colorato di giallo: non solamente il testo del libro, ma anche la copertina, il colophon, l’indice, la biografia, le note, eccetera. Potrebbe anche non essere ciò che desideravamo.

Una prima soluzione per ovviare a questi problemi è combattere il fuoco col fuoco. Il CSS è uno stile ereditario: tutto ciò che assegniamo a un elemento è ereditato dai suoi discendenti. Quando noi assegniamo qualcosa al tag <html> o al tag <body>, che sono di fatto i capostipiti di tutte le nostre pagine, ogni altro tag all’interno di questi ne erediterà lo stile. Una regola del tipo
body {
  font-family: "Times New Roman";
}
assicurerà che tutti gli elementi della nostra pagina utilizzeranno il Times New Roman come font, in quanto discendenti del tag <body>, che utilizza il Times New Roman. Se però, poco sotto, inseriamo una regola del tipo
h2 {
  font-family: Arial;
}
allora tutti i tag <h2> (e i loro eventuali discendenti) utilizzeranno uno Arial come font, mentre il resto della pagina, che non discende dal tag <h2>, proseguirà col Times New Roman. In questo modo, abbiamo impostato un carattere di base per tutto il nostro libro e, accanto, un carattere diverso e specifico per i titoli contenuti in un tag <h2>.

Una strategia di questo tipo, costruita partendo con ampie generalizzazioni e procedendo di volta in volta con interventi mirati su varie sottocategorie di tag, può portarci molto lontano ed è, di fatto, alla base di qualsiasi foglio di stile. Possiamo definirla, dunque, una strategia necessaria, ma non ancora sufficiente. Per interventi chirurgici, che modifichino soltanto alcuni tag di un certo tipo e lascino invariati gli altri (modificando ad esempio il primo tag <p> di ogni capitolo, ma non tutti i tag <p> successivi), avremo bisogno di un’altra arma, molto più precisa: la classe di stile, con la selezione per classe da essa derivata.

3-2 Selezione per classe

Una classe di stile è una etichetta assegnata a uno o più tag, per individuarli come appartenenti a un determinato tipo. Ad esempio, possiamo creare una classe “primo” e attribuirla al primo paragrafo di ogni capitolo del nostro libro: in questo modo, li identificheremo come paragrafi diversi dagli altri e potremo assegnare loro uno stile particolare.

Per creare una classe, scegliamo un nome: uno qualsiasi, a nostra scelta, che non sia ancora stato usato. Idealmente, sarebbe meglio utilizzare un nome che descriva, almeno in parte, la funzione di quella classe, ma non è obbligatorio: se ci serve una classe per le note di copyright nel nostro libro, creare una classe di nome “copyright” sarebbe la soluzione più razionale, ma nulla ci vieta di chiamarla “pincopallino” o “abbarcigiappolo”, purché il nome non sia già stato usato per un’altra classe.

Una volta scelto il nome, lo scriveremo nel nostro foglio di stile, preceduto da un punto: se il nome della classe è “copyright”, nel foglio di stile la indicheremo come .copyright, per indicare che non è il nome di un tag, ma di una classe. Il resto è come possiamo immaginare: apriamo una parentesi graffa, elenchiamo una dopo l’altra le proprietà di quella classe, chiudiamo la parentesi graffa. In questo modo, abbiamo ottenuto un selettore per classe.

Per esempio, la regola
.copyright {
  color: gray;
  font-size: 10px;
}
seleziona tutti i tag a cui è stata assegnata una classe di nome “copyright”, dopodiché attribuisce al contenuto del tag le proprietà elencate per la classe, ossia un testo di colore grigio e un carattere di corpo 10 pixel. Se la selezione per tag guardava al nome dei vari tag presenti nella pagina, la selezione per classe ignora il nome del tag e guarda solo al suo attributo “class”. Possiamo dunque assegnare una stessa classe a tag diversi tra loro e tutti riceveranno lo stesso stile.

Come si assegna una classe a un tag? Attraverso il suo attributo class. In altri termini, aggiungeremo al nome del tag il suo attributo class=“”, col nome della classe tra le virgolette. Ad esempio,
<p class="copyright">
assegna a un tag <p> la classe “copyright”, che avevamo creato in precedenza. Allo stesso modo, possiamo scrivere <div class=“copyright”> e assegnare la classe “copyright” a un tag <div>, che si trova nella nostra pagina, e il risultato sarà lo stesso: il testo delimitato da quel tag presenterà le varie formattazioni indicate per la classe copyright, proprio come succederà al testo delimitato da un tag <p>, a cui sia stata assegnata la stessa classe. Una classe di stile può essere assegnata a tutti i tag che vogliamo e a qualsiasi tipo di tag.

Anche se una stessa classe può essere assegnata a tag di diverso tipo, il risultato non sarà sempre lo stesso, né sarà sempre piacevole. Una classe che abbiamo creato per le immagini, ad esempio, non darà risultati molto gradevoli, se la applichiamo a un tag che contiene solo testo, proprio come una classe progettata per una porzione di testo non darà i risultati che ci aspettavamo, se assegnata a una immagine. Per il resto, una classe di stile può essere assegnata a qualsiasi tipo di tag, a cui le proprietà della classe siano applicabili: una classe con proprietà che modifichino il tipo di font, ad esempio, potrà funzionare ovunque ci sia un tag che contiene testo.

A questo proposito, è possibile utilizzare un selettore particolare, per assegnare determinate proprietà a una classe, soltanto quando è in combinazione con un certo tag. Se scriviamo
p.nota {
  font-size: 10px;
}
selezioniamo la classe “nota” soltanto quando è stata attribuita a un tag <p>: in questo caso, la dimensione del testo riceverà la proprietà da noi specificata, ossia 10 pixel. Se la classe “nota” è attribuita a un qualsiasi altro tipo di tag, che non sia <p>, questa regola non si applicherà.

La struttura di questo selettore è molto semplice:
tag.classe
Il nome del tag e il nome della classe sono attaccati, separati soltanto dal punto che introduce sempre il nome di una classe, in un selettore. È probabile che non vi capiterà molto spesso di dover utilizzare questo selettore, per impaginare un libro, ma è pur sempre bene essere consapevoli della sua esistenza.

Alcune regole per usare le classi di stile e vivere felici:

  • il nome di una classe può non avere senso, ma deve cominciare con una lettera dell’alfabeto (niente numeri). xjnd è un nome valido per una classe, 8sunc non lo è;
  • il nome di una classe non può contenere spazi, ma può contenere numeri e i trattini – e _, purché non siano a inizio nome. primo-paragrafo è un nome valido, primo paragrafo non lo è;
  • il nome di una classe distingue tra lettere maiuscole e minuscole: le classi primo e Primo sono due classi diverse;
  • il nome di una classe, nel foglio di stile, è sempre preceduto da un punto, per indicare che stiamo usando una selezione per classe.

Due tag speciali sono spesso usati assieme a una classe di stile: il tag <div> e il tag <span>, che già indicavo nel primo capitolo. Questi due tag, di per sé, non fanno nulla, ma servono a delimitare una porzione di pagina (il tag <div>) o una porzione di testo (il tag <span>): una volta delimitata questa porzione, le possiamo assegnare una classe di stile. Ad esempio,
<div class="citazione">
  <p>Primo paragrafo della citazione.</p>
  <p>Secondo paragrafo della citazione.</p>
</div>
isola due paragrafi, racchiudendoli in un tag <div>, e assegna a questa porzione di pagina una classe di stile denominata “citazione”, che conterrà formattazioni indicate da noi nel foglio di stile e che, presumibilmente, sono adatte a far risaltare una citazione lunga alcuni paragrafi.

Di contro, una struttura del tipo
<p>Questa è la presentazione generale dell’opera <span class="titolo-libro">Tetrapiloctomia applicata</span>, in cui si parlerà con cura delle tecniche migliori per sezionare un capello in quattro parti.</p>
isolerà alcune parole nel corpo di un paragrafo, per assegnarvi una particolare classe di stile: nel caso in esempio, la classe “titolo-libro”, che conterrà formattazioni indicate da noi nel foglio di stile e che, presumibilmente, sono adatte a far risaltare il titolo di un libro.

Ricordatevi di questi due tag, perché è probabile che vi capiterà spesso di averne bisogno.

3-3 Selezioni multiple

Oltre a selezionare singoli tag o singole classi, è anche possibile selezionare più tag o più classi contemporaneamente, quando si scrive una regola del CSS. Selezionando più tag alla volta, è così possibile assegnare una stessa regola a molti tag, che presentano affinità, risparmiandoci la fatica di creare una classe specifica e assegnarla poi a ogni occorrenza di questi tag all’interno della nostra pagina: se vogliamo che tutti i titoli utilizzati nel nostro libro abbiano un certo tipo di font o un certo colore, è molto più rapido selezionare tutti i tag da <h1> a <h6> e assegnare loro queste impostazioni, invece di creare una classe specifica per i titoli e poi attribuirla a tutte le occorrenze di un tag da <h1> a <h6> all’interno nel nostro libro.

La sintassi non è molto diversa da quella che abbiamo già visto per i selettori precedenti: basta elencare i nomi dei vari tag (o delle varie classi), separandoli con una virgola. Ad esempio,
h1, h2, h3 {
  color: red;
}
è una regola che assegna il colore rosso al testo contenuto nei tag <h1>, <h2> e <h3>, nonché agli eventuali discendenti , ossia quei tag che potrebbero trovarsi al loro interno.

Le classi si comportano allo stesso modo. La regola
.copyright, .titolo {
  color: red;
}
ad esempio, assegna il colore rosso a tutti gli elementi che possiedono una classe copyright, oppure una classe titolo (e tutti i loro discendenti, ovviamente).

Nulla ci vieta di mischiare tag e classi, scrivendo ad esempio
h1, h2, .titolo, h3 {
  color: red;
}
Questa regola assegnerà il colore rosso a tutti gli elementi racchiusi in un tag <h1>, <h2> o <h3>, ma anche a tutti gli elementi che possiedono una classe titolo.

Infine, esiste un selettore speciale, ossia *, che vi permette di selezionare tutti i tag presenti nella pagina (o nelle pagine) che utilizzano quel foglio di stile. È improbabile che avrete mai bisogno di utilizzarlo, ma è bene sapere che è possibile scrivere una regola quale
* {
  color: red;
}
e colorare di rosso tutto il testo presente nelle pagine. Un modo molto più chiaro e razionale per ottenere lo stesso risultato è selezionare il tag <body> e assegnargli le caratteristiche base per le nostre pagina, ma nessuno vi vieta di ricorrere all’asterisco, se proprio lo volete.

L’ordine in cui inserite i vari elementi da selezionare non farà alcuna differenza, per cui potete elencare prima i tag e poi le classi, oppure prima le classi e poi i tag, o anche mischiarli come preferite. La sola cosa a cui dovete sempre prestare la massima attenzione è inserire una virgola tra ogni elemento: se dimenticate la virgola, la regola sarà ugualmente valida, ma funzionerà in un modo alquanto diverso e, a meno di sorprendenti e improbabili coincidenze, il risultato non sarà quello che volevate voi.

3-4 Selettori discendenti

Cosa succede se dimentichiamo la virgola tra i tag? Otterremo un selettore discendente. Invece di selezionare tutti i tag (o le classi) su un piano paritario, omettendo la virgola selezioneremo soltanto i tag contenuti direttamente nei tag che li precedono. Ad esempio
p, a {
  //proprietà varie
}
seleziona tutti i tag <p> (cioè tutti i paragrafi) e tutti i tag <a> (cioè tutti i link, e attribuisce loro varie proprietà, elencate tra le parentesi graffe. Se togliamo la virgola, la regola
p a {
  //proprietà varie
}
selezionerà tutti i tag <a> (cioè i link) che si trovano all’interno di un tag <p>, ossia tutti i link all’interno dei vari paragrafi in cui è racchiusa la nostra pagina.

Ricordate ciò che dicevo nel primo capitolo, parlando della struttura ad albero genealogico delle pagine? La troviamo applicata qui. La regola usata come esempio si applicherà a tutti i tag <a> che discendono da un tag <p>: possono essere i suoi figli, oppure i figli dei suoi figli, e così via. Il solo fattore importante è che, tra gli antenati, abbiano un tag <p>.

Esiste poi un selettore molto simile, ma più specifico: il selettore dei figli. A differenza del selettore dei discendenti, che abbiamo appena visto, il selettore dei figli seleziona soltanto i tag che sono figli diretti del primo tag, ed è scritto con un > tra i due tag presi in esame. Di conseguenza, la regola
p > a {
  //proprietà varie
}
si applicherà soltanto ai tag <a> che sono figli diretti di un tag <p>. Ad esempio, il tag <a> sarà selezionato, se abbiamo una struttura come questa
<p>Questo è un <a href="indirizzoACaso.html">link</a> normale.</p>
, ma non sarà selezionato in una struttura come questa
<p>Questo è un <strong>fantastico <a href="indirizzo.html">link</a></strong> rutilante.</p>
, perché il tag <a> è figlio diretto del tag <strong>, non del tag <p>.

Tutto ciò che abbiamo visto per i tag, naturalmente, si applica anche con le classi. Un selettore del tipo
.primo a {
  //proprietà varie
}
selezionerà tutti i tag <a>, che discendono da un qualsiasi tag dotato di una classe “primo”, mentre un selettore del tipo
.primo > a {
  //proprietà varie
}
selezionerà tutti i tag <a>, che siano figli diretti di un qualsiasi tag dotato di una classe “primo”. Tag e classi sono quasi sempre intercambiabili, quando assembliamo una regola del CSS, per cui non ci sono limiti alle combinazioni, a parte quelli dettati dalla nostra sanità mentale.

Se tutto questo vi sembra complicato, infatti, sappiate che potete renderlo ancora più complicato, se proprio volete. Sia il selettore dei discendenti, che il selettore dei figli, non sono limitati a due tag, ma possono essere estesi a volontà. Possiamo dunque scrivere
p strong a {
  //proprietà varie
}
, che selezionerà per noi tutti i tag <a>, che discendono da un tag <strong>, che a propria volta discende da un tag <p>. Allo stesso modo, scrivendo
p > strong > a {
  //proprietà varie
}
, possiamo selezionare tutti i tag <a>, che sono figli diretti di un tag <strong>, che a propria volta è figlio diretto di un tag <p>. Indipendentemente da quanto intricata sarà la relazione, resterà sempre un valido esempio di CSS e, di conseguenza, sarà interpretato e applicato dal dispositivo di lettura, quando si tratterà di rendere la pagina sullo schermo.

D’altro canto, il fatto che una cosa sia possibile non implica necessariamente che sia anche bene farla. A meno che non ne vada della vostra esistenza, evitate di scrivere selettori di discendenti che vadano oltre il semplice “A è discendente di B”: vi risparmierete numerose complicazioni e, molto probabilmente, tempo sprecato a studiare le catene di parentele, per capire come mai quel maledetto tag appaia di un colore, anziché di un altro. A trafficare troppo con selettori di questo tipo, vi potreste ritrovare, un giorno, a riempire fogli e fogli con la scritta “il mattino ha l’oro in bocca”, per poi inseguire vostra moglie (o vostro marito) impugnando un’accetta: siete avvisati.

3-5 Pseudoclassi e pseudoelementi

Accanto alle classi, che abbiamo già visto, esistono anche le pseudoclassi e gli pseudoelementi, ultimo argomento che tratterò in questo capitolo.

A differenza di una classe, una pseudoclasse (o uno pseudoelemento) non è creata da noi e non può essere assegnata a un particolare tag: pseudoclassi e pseudoelementi sono categorie già definite nel CSS e messe a nostra disposizione, per selezionare parti molto specifiche di una pagina e applicarvi uno stile. Ad esempio, possiamo utilizzarle per selezionare la prima lettera di un paragrafo, oppure la prima linea di un paragrafo, o anche per assegnare colori diversi ai link, a seconda che siano stati già visitati o meno. Questo ultimo caso, probabilmente, non ci interesserà molto, ma poter decorare la prima lettera di un capitolo ci tornerà utile molto spesso, lavorando alla impaginazione di un libro. Per questo motivo, spenderà un poco di tempo a parlare di quelli che potrebbero servire in uno e-book.

Le pseudoclassi che potreste voler utilizzare sono due ed entrambe sono abbinate al tag <a>, in quanto descrivono lo stato dei link: sono :link e :visited.
a:link
Questo selettore funziona per tutti i link che non sono ancora stati visitati. Se volete utilizzarlo, scriverete una regola del tipo
a:link {
  //proprietà varie
}
, per modificare l’aspetto dei link, che i vostri lettori non hanno ancora visitato: tipica applicazione, in uno e-book, sarà per colorare in modo diverso le note e le voci dell’indice, a seconda che siano state viste o meno.

Abbinato al precedente, troviamo il selettore
a:visited
, che invece seleziona tutti i link già visitati. In pratica, è l’opposto del precedente: a:link seleziona i link non ancora visitati, a:visited seleziona quelli già visitati. Per il resto, il funzionamento è lo stesso.

Due pseudoelementi, che in un libro saranno usati spesso, sono :first-letter e :first-line.

:first-letter

Seleziona la prima lettera dell’elemento a cui è abbinato: solitamente un paragrafo, ma può essere qualsiasi altro elemento. Il suo uso più tipico, in uno e-book, è per assegnare alla prima lettera di un capitolo un aspetto diverso, rendendola più grande, di un altro colore e così via. In questo caso, noi creeremo una classe apposita per il primo paragrafo (per esempio, la classe “primo”) e, nel foglio di stile, scriveremo
.primo:first-letter {
  //proprietà della prima lettera del primo paragrafo.
}

Lo pseudoelemento si attacca direttamente al nome del tag, oppure al nome della classe, a cui è abbinato. Il CSS3, ossia lo standard più recente del CSS, stabilisce che si debbano utilizzare due “due punti”, per unire uno pseudoelemento al tag/classe a cui si riferisce: in altri termini, al posto di
.primo:first-letter
dovremo scrivere
.primo::first-letter
Siccome però non tutti i dispositivi di lettura supportano il CSS3, vi consiglio di partire utilizzando la prima versione, che offre maggiori probabilità di funzionare anche su dispositivi più vecchi.

Un secondo pseudoelemento, simile al precedente, è
:first-line
, che seleziona la prima riga dell’elemento a cui è stato abbinato. Il suo funzionamento è identico al precedente, in tutti gli aspetti. Se vogliamo che la prima riga di tutti i nostri paragrafi sia in grassetto, ad esempio, scriveremo
p:first-line {
  font-weight: bold;
}
, oppure
p::first-line {
  font-weight: bold;
}
, se vogliamo seguire le direttive del CSS3 e rischiare che i dispositivi più vecchi non lo riconoscano. Con ogni probabilità, tra pseudoclassi e pseudoelementi, il solo che vi troverete a utilizzare con una certa frequenza in un libro sarà :first-letter, per decorare la prima lettera di ogni vostro capitolo.

Oltre a tutto ciò che abbiamo già visto, esistono anche altri tipi di selettori, ma non li affronterò in questa guida: dopotutto, sto parlando del CSS che è comunemente usato negli e-book, non del CSS in generale, e le probabilità che abbiate bisogno di altri selettori, mentre state impaginando un libro, sono estremamente basse. Se mai dovesse capitare, un manuale generalista di CSS dovrebbe potervi dare la risposta di cui avete bisogno.