In questo ultimo tutorial sui selettori, vi presenterò una forma molto particolare di selettori. Si tratta delle cosiddette pseudoclassi e pseudoelementi. Questi sono selettori che non si riferiscono a specifici elementi HTML, ma vengono generati dal dispositivo di output.
Con le pseudoclassi e i pseudoelementi è possibile definire dichiarazioni per parti dell'HTML che non possono essere descritte chiaramente da un singolo elemento HTML. Esempi tipici sono un hyperlink appena cliccato o un hyperlink non ancora visitato.
Stilizzare gli Hyperlink
Spesso si desidera stilizzare gli hyperlink della pagina. A tale scopo, il CSS offre numerose possibilità per indirizzare e personalizzare visivamente i diversi stati degli hyperlinks.
Se volete assegnare ad un hyperlink un colore rosso, il codice sarà il seguente:
a:link {
color: red;
}
Con a:visited si identificano invece gli hyperlinks già visitati. Con la seguente sintassi è possibile rappresentare tali hyperlinks, che sono stati cliccati almeno una volta, di colore blu.
a:visited {
color:blue;
text-decoration:none;
}Nel browser apparirà così:
Se volete personalizzare gli hyperlinks appena cliccati, è possibile farlo anche.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Per farlo, si utilizza la sintassi a:active.
La sintassi a:hover si riferisce, invece, allo stato in cui il cursore viene posizionato sull'hyperlink. Inoltre, con a:focus c'è un altro pseudoelemento. Descrive il momento in cui l'hyperlink ottiene il focus.
Altri Pseudoelementi
Esistono pseudoelementi che consentono di indirizzare parti di altri elementi. Un esempio tipico è ::first-letter. Questo pseudoelemento seleziona il primo carattere dell'elemento corrente. Può essere utilizzato per tutti gli elementi che contengono testo. Ma attenzione: i pseudoelementi devono essere inseriti solo alla fine di tutti i selettori. Quindi devono essere posizionati prima delle parentesi graffe di apertura.
h1::first-letter {
color: blue;
}
Con ::first-line è possibile indirizzare la prima riga di un elemento. Questo pseudoelemento è applicabile esclusivamente agli elementi di livello blocco. Un esempio:
p::first-line {
background-blue;
}
Ecco il risultato nel browser:
una
Con i due pseudoelementi :after e :before è possibile visualizzare contenuti aggiuntivi prima e dopo un elemento. Con content si specifica cosa deve essere visualizzato.
• normal - il pseudoelemento definito di solito non è generato.
• none - il pseudoelemento non è generato.
•
•
•
• attr(
• close-quote - inserisce un apice di chiusura.
• no-close-quote - anche se non inserisce un apice di chiusura, aumenta di uno il livello di annidamento.
• no-open-quote - anche se non inserisce un apice di apertura, aumenta di uno il livello di annidamento.
• open-quote - inserisce un apice di apertura.
Un esempio:
ul li:before {
content: uri("bullet.gif");
}
Inoltre, con CSS3 è stato introdotto il pseudoselettore :not. Questo permette di selezionare facilmente contenuti specifici. Un primo esempio mostra quanto sia potente effettivamente questo pseudoselettore. Supponiamo che si vogliano selezionare tutti gli hyperlinks che non hanno un attributo href. La sintassi corrispondente sarebbe la seguente:
a:not([href])
Gli hyperlinks "normali" non verrebbero influenzati da questa sintassi. Ma sarebbe possibile accedere alle definizioni degli anchor.
<a name="top">Inizio della pagina</a>
Un esempio più dettagliato illustra la potenza di :not. All'interno di un documento sono state definite diverse frasi di testo.
<body> <h1>PSD-Tutorials.de</h1> <p>Questa è una frase di testo.</p> <p>Questa è un'altra frase di testo.</p> <div>Questa è un'area di testo.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Oltre ai paragrafi contrassegnati con p, ci sono anche una sezione div ed un collegamento ipertestuale. Ora dovrebbe accadere quanto segue:
• Tutti i paragrafi marcati con p avranno il colore del testo nero.
• Invece, ovunque non ci siano paragrafi p, sarà utilizzato il colore rosso come colore del testo.
La sintassi CSS corrispondente è la seguente:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Il principio dell'ereditarietà
Una delle cose più importanti quando si tratta di comprendere le definizioni CSS è l'ereditarietà. Infatti, in CSS le proprietà di stile vengono ereditate da un elemento all'altro.
Un esempio:
html {
color: red
}Con questa definizione viene assegnato all'elemento html il colore del testo rosso.
A causa del principio dell'ereditarietà, questa definizione di colore si applica inizialmente a tutti gli elementi sottohtml. Quindi, di base, tutti gli elementi situati sotto html vengono mostrati in rosso. Vantaggio di questa variante: per questi elementi non è necessario definire esplicitamente il rosso come colore. Ma cosa succede se il contenuto dei paragrafi p non dovrebbe essere mostrato in rosso? In tal caso, è necessario sovrascrivere la definizione di colore superiore di html.
html {
color: red;
}
p {
color: #000;
}
Cosa accade se ci sono due elementi p e div ora?
<body> <p>PSD-Tutorials.de</p> <div>Mondo</div> </body>
Il risultato appare così:
La definizione di colore di html influisce esclusivamente sul contenuto di div. Il paragrafo p, invece, viene mostrato con il colore del testo nero.
In CSS ci sono diverse modalità per definire gli stili. Questo è il motivo per cui per un elemento possono esistere istruzioni contrastanti. Per tali casi, CSS prevede un principio di ponderazione. Seguendo questo principio, è determinato quale delle istruzioni ha la precedenza per un elemento. Non intendo approfondire in dettaglio questo principio in questo momento. Tuttavia, potete trovare informazioni dettagliate a riguardo ad esempio sul sito http://wiki.selfhtml.org/wiki/CSS/Kaskade o anche su http://www.thestyleworks.de/basics/cascade.shtml.
Quello che mi interessa è mostrare su cosa dovete fare attenzione quando definite le proprietà CSS. A tal scopo, ecco un esempio:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Questo è un paragrafo con una <strong>parola in grassetto</strong>.</p>
<h2>Questa è un'intestazione con una <strong>parola in grassetto</strong>.</h2>
</div>
</body>
</html>Nel browser appare così:
Come potete notare, le parole contrassegnate come strong vengono formattate in modo diverso. La formattazione che viene applicata dipende infine dall'ordine delle definizioni.
In alternativa, c'è anche la parola chiave !important, attraverso la quale potete contrassegnare un'istruzione CSS come particolarmente importante.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Anche qui diamo uno sguardo al risultato:
Vi invito a leggere assolutamente le fonti menzionate in questo tutorial. (Anche se all'inizio non è necessario approfondire troppo questa tematica).
