Nella passata lezione abbiamo visto i selettori di base, ovvero i selettori utilizzati più di frequente attraverso i quali è possibile far fronte alle più comuni esigenze di sviluppo. Le possibilità offerte da CSS 2.1, tuttavia, non si euriscono qui. Le specifiche del linguaggio, infatti, prevedono altri tipi di selettori che, da un punto di vista espositivo, possiamo dividere in due gruppi:
- selettori di relazione
- selettori per attributo
Selettori di relazione
Sono detti di relazione i selettori che consentono di individuare uno o più elementi sulla base della relazione che esiste tra loro all’interno dell’albero del DOM (Document Object Model). Grazie a questi selettori è possibile identificare con facilità, ad esempio, gli elementi figli o fratelli di un dato elelemnto. Ma andiamo con ordine.
Selettore di discendenti
Si tratta di un selettore molto utilizzato e consente di identificare un elemento discendente di un altro. Un elemento si dice "discendente" di un altro quando quest’ultimo lo contiene al suo interno, a prescindere dal livello di profondità.
La sintassi è molto semplice: per identificare un elemento discendente è sufficiente indicarlo dopo il suo antenato (elemento contenitore) separando i due elementi con uno spazio. Ad esempio:
#intro p { color: #FF0000; }Con questo codice vado a selezionare tutti i paragrafi contenuti all’interno dell’elemento con ID "intro".
La gerarchia (contenitore discendente) va specificata da destra verso sinistra e non ci sono limiti in merito al livello di precisione. Ad esempio:
#intro p span { color: #FF0000; }Il codice qui sopra colorerà in rosso solo i tag <span> discententi di tag <p> a loro volta discendenti dell’elemento con ID "intro".
Selettore di figli
Parzialmente analogo al precedente è il selettore di figli. Mentre nel selettore di discendenti, oltre ai figli ,vengono selezionati anche i "nipoti" senza limiti di grado, col selettore di figli (>) si identificano solamente quegli elementi direttamente discendenti del contenitore (genitore). Vediamo un esempio partendo dal codice HTML:
<ul id="spesa">
<li>Pasta</li>
<li>Burro</li>
<li>Frutta
<ul>
<li>Mele</li>
<li>Arance</li>
</ul>
</li>
</ul>Questo il nostro CSS:
#spesa > li { color: #FF0000; }Con questo esempio identificheremo tutti gli item figli dell’elenco puntato con ID "spesa" ma non eventuali elementi di liste ulteriormente annidiate.
Selettore di adiacenti
Questo selettore (+) consente di identificare gli elementi "fratelli" direttamente adiacenti, cioè quegli elementi che non solo si trovano sullo stesso livello del DOM, ma sono anche "appoggiati" gli uni agli altri. Vediamo un esempio partendo dal codice HTML:
<h1>Titolo</h1>
<p>bla bla bla</p>
<img src="foto.jpg">
<p>bla bla bla</p>Questo il nostro CSS:
h1 + p { color: #FF0000; }Con questo codice selezioniamo (colorandolo di rosso) solo il primo paragrafo in quanto è l’unico immediatamente adiacente al tag H1.
Selettore di successori
Per finire è anche possibile selezionare tutti i "fratelli" che succedono ad un dato elemento. Per farlo si utilizza l’operatore tilde (~). Tornando all’HTML dell’esempio precedente ma variando il CSS in questo modo:
h1 ~ p { color: #FF0000; }avremmo colorato di rosso entrambi i paragrafi e non solo il primo.
Si noti, tuttavia, che nel caso di un HTML parzialmente differente come questo:
<p>bla bla bla</p>
<h1>Titolo</h1>
<p>bla bla bla</p>
<img src="foto.jpg">
<p>bla bla bla</p>il primo paragrafo (quello sopra al titolo) non sarebbe stato stilizzato in quanto non successivo (ma precedente) al tag H1.
Selettori per attributo
Attraverso questi selettori è possibile identificare degli elementi della pagina in base ad un dato attributo e/o al valore di questo. I selettori di questa famiglia sono tre. Vediamoli in rassegna.
Selezione in base alla presenza o meno di un attributo
Le specifiche di CSS 2.1 ci consentono di selezionare un elemento identificandolo in base al fatto che possegga o meno un dato attributo. Ad esempio:
a[title] { color: #FF0000; }Con questo codice di stile andremo a colorare solamente i link muniti dell’attributo title. La sintassi, come avete potuto notare, prevede che il nome dell’attributo sia circondato dalle parentesi quadre. E’ appena il caso di sottolineare che la selezione per attributo può combinarsi anche con gli altri selettori visti sino ad ora, ad esempio con una classe:
a.sponsor[title] {color: #FF0000; }Così facendo il nostro stile si applicherà solo ai link aventi sia classe "sponsor" che attributo title.
Selezione in base al valore esatto dell’attributo
Nel caso precedente la selezione avviene solamente in base alla presenza o meno di un dato attributo. CSS, tuttavia, ci consente di fare molto di più. E’ possibile, ad esempio, selezionare un elemento in base al valore di un dato attributo, ad esempio:
a[title=MrWebmaster] {color: #FF0000; }Così facendo lo stile verrà applicato solo al link con attributo title avente come valore la stringa "MrWebmaster". A questo punto, però, si rende necessaria una precisazione. Se il nostro valore fosse composto da una stringa con degli spazi questa avrebbe dovuto essere compresa tra virgolette, così:
a[title="Mr Webmaster"] {color: #FF0000; }Selezione in base al valore parziale dell’attributo
Una variante del metodo visto sopra è la selezione di elementi mediante l’indicazione di "una parte soltanto" del valore dell’attributo. Per farlo si utilizzano gli operatori ~= e |= che corrispondono, nell’ordine, a "contiene…" e "inizia con…".
Vediamo degli esempi chiarificatori:
/* seleziono i link che hanno un title che contiene la stringa "web" */
a[title~="web"] { color: #FF0000; }
/* seleziono i link che hanno un title che inizia con la stringa "web" */
a[title|="web"] { color: #FF0000; }Attenzione: nell’atto di selezionare un elemento in base al valore del suo attributo (sia esso specificato in forma integrale o parziale), CSS è case-sensitive. Questo vuol dire che la stringa "web" non è equivalente a "WEB"!
