È possibile indirizzare i cosiddetti elementi figli. Questi sono quelli che sono direttamente subordinati ad altri elementi. Ammettiamolo, suona un po' astratto, ma può essere spiegato molto bene con un esempio.
<body> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3</p> </body>
In questo caso, body è l'elemento genitore. Gli elementi p sono figli diretti di body. Basandosi su questa conoscenza, è possibile utilizzare il selettore degli elementi figli.
body>p {
color: blue;
}
Questa sintassi imposta tutti i paragrafi che sono figli diretti di body di colore blu.
L'esempio seguente mostra ancora una volta le differenze tra le due istruzioni body p e body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<div>
<p>Paragrafo 4</p>
</div>
</body>
</html>I primi tre paragrafi di testo definiti sono figli diretti di body. L'istruzione body p assegna un colore blu a tutti i paragrafi di testo. body>p, d'altra parte, influisce solo sui primi tre paragrafi di testo. Di conseguenza, questi paragrafi vengono visualizzati in un carattere più grande.
Successivamente, vorrei presentarvi il selettore degli elementi successivi. Questo selettore identifica un elemento che segue immediatamente un altro elemento e condivide lo stesso elemento genitore. Anche in questo caso, un esempio:
h1+p {
color: blue;
}
Questa sintassi imposta il colore del testo di un paragrafo su blu. Tuttavia, ciò vale solo se il paragrafo segue direttamente un'intestazione di primo livello.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Intestazione</h1>
<p>Paragrafo 1</p>
<h2>Intestazione</h2>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<div>
<p>Paragrafo 4</p>
</div>
</body>
</html>Osservate il risultato nel browser.
Solo il primo paragrafo verrà visualizzato in blu. Gli altri paragrafi sono neri. Questo perché questi elementi p non seguono un h1, ma un h2.
Per quanto riguarda gli elementi successivi, in CSS3 sono state introdotte altre possibilità. Da adesso è possibile accedere a tutti gli elementi successivi di un elemento specifico. Un esempio:
h1~p {
color: red;
}
Attraverso questa sintassi, vengono indirizzati tutti i paragrafi successivi a h1.
Inoltre, è possibile indirizzare non solo gli elementi direttamente. È possibile anche accedere agli attributi degli elementi.
Ecco alcuni di questi selettori:
• [att] – L'elemento deve contenere solo l'attributo. È irrilevante se viene fornito un valore o meno.
• a[href] – Vengono evidenziati tutti i collegamenti ipertestuali (<a href=…>). Questo non si applica alle definizioni degli anchor (<a name=…>).
• [align=left] – Evidenzia tutti gli elementi il cui attributo align contiene il valore left.
• [attr~=value] – Vengono evidenziati tutti gli elementi in cui il valore è contenuto in un elenco di valori separati da spazio.
• [attr|=value] – Evidenzia un elemento se il valore specificato si trova all'inizio di una stringa di caratteri separata da un trattino.
• img[width="200"] – Vengono evidenziate tutte le immagini che hanno una larghezza di 200 pixel.
Ovviamente sorge la domanda su quando potrebbero essere necessari tali selettori di attributi. Pensate, per esempio, a un modulo e alle caselle di controllo definite al suo interno. Le caselle di controllo vengono – come ormai sapete – definite tramite l'elemento input. Il problema è che l'elemento input viene utilizzato anche per definire normali campi di testo. Di conseguenza, non è possibile applicare una formattazione diversa alle caselle di controllo e ai campi di testo. Ecco dove entrano in gioco i selettori di attributi. Per una migliore comprensione, date un'occhiata all'esempio seguente:
<body> Nome: <input type="text" id="name" /> <br /> Uomo: <input type="checkbox" name="sesso" id="sesso" /> <br /> Donna: <input type="checkbox" name="sesso" id="sesso" /> </body>
Sono stati definiti vari elementi di modulo.
• un campo di inserimento testo
• due caselle di controllo
Questi campi devono essere formattati.
input {
border:3px solid #000;
width: 10em;
}Assegniamo ai campi un bordo e una larghezza.
Il problema è che la larghezza definita dovrebbe essere applicata solo al campo di input di testo, non alle caselle di controllo. Tuttavia, con il selettore dell'elemento non è possibile distinguere tra i diversi tipi di campi. Per far sì che questa distinzione funzioni, si fa ricorso ai selettori degli attributi. Ecco un esempio di come potrebbe apparire:
input[type="checkbox"] {
width: auto;
}
Con il selettore mostrato si accede effettivamente solo agli elementi di input che possiedono la combinazione attributo-valore type="checkbox".
Ripetizioni
CSS offre finalmente la possibilità di gestire le ripetizioni. Ovviamente sorge la domanda su a cosa possa servire tutto ciò. Questi selettori sono utili ad esempio quando si desidera stilare in modo diverso ogni seconda riga di una tabella. Prima di presentare i selettori disponibili, ecco un tipico esempio:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Si tratta di un elenco puntato normale. Con CSS, ogni terza voce dell'elenco deve ricevere un colore di sfondo.
Viene utilizzato il selettore nth-child(). Con questo selettore viene preso in considerazione ogni ennesimo figlio.
#sprachen li:nth-child(3n) {
background-color: red;
}
I seguenti selettori sono disponibili:
• :root - Utilizzando il selettore :root si può fare riferimento alla radice di un documento.
• :nth-child(n) - Indirizza ogni ennesimo elemento all'interno di un elemento genitore. Questo selettore è particolarmente utile quando si desidera stilare in modo diverso più elementi. n è una parola chiave fissa su cui è possibile applicare operazioni matematiche. n può essere equiparato al valore 1.
• :nth-last-child(n) - Indirizza ogni ennesimo elemento all'interno di un elemento, scansionando i figli dall'ultimo.
• :nth-of-type(n) - Indirizza ogni ennesimo elemento dello stesso tipo HTML allo stesso livello.
• :nth-last-of-type(n) - Indirizza ogni ennesimo elemento dello stesso tipo HTML allo stesso livello, scansionando i figli dall'ultimo.
• :first-child - Indirizza il primo figlio all'interno di un elemento.
• :last-child - Indirizza l'ultimo figlio all'interno di un elemento.
• :first-of-type - Indirizza il primo elemento dello stesso tipo HTML all'interno di un elemento genitore.
• :last-of-type - Indirizza l'ultimo elemento dello stesso tipo HTML all'interno di un elemento genitore.
• :only-child - Indirizza un elemento che non ha elementi fratelli ed è l'unico figlio nell'elemento genitore.
• :only-of-type - Indirizza un elemento che non ha elementi fratelli dello stesso tipo HTML ed è l'unico figlio di quel tipo nell'elemento genitore.
• :empty - Indirizza gli elementi vuoti.
I selettori presentati semplificano notevolmente il lavoro con HTML, eliminando le complesse definizioni delle classi del passato.
