|
I selettori (prima parte) |
|
|
|
|
|
|
Scritto da Vincenzo
|
|
I selettori permettono di decidere quale è la parte del documento a cui verrà applicata la formattazione. Ci sono vari tipi di selettori che descriverò di seguito:
Selettori di elementi
Può essere costituito da tutti gli elementi di Xhtml , come paragrafi, tabelle, ecc:
p{text-decoration:underline; color:#000000;}
essi possono anche essere raggruppati in modo da semplificare il codice e “alleggerire“ la pagina. Se in caso si desidera attribuire lo stesso colore del testo a più selettori si può usare la seguente sintassi.
h1, p, h3, h4{color:#ffff00;}
Selettore del discendente
Tale selettore serve a raggruppare tutti quegli elementi che sono discendenti di un altro elemento specificato, cioè quegli elementi che sono contenuti all’interno dell’elemento specificato, essi vanno letti da destra a sinistra. E’ da specificare che ci sono delle regole sull’annidamento; un paragrafo ad esempio non può contenere al suo interno un blocco (come un div).
div h1{color:#ffff00;}
nel caso dell’esempio precedente, la formattazione verrà applicata a tutti gli elementi h1 contenuti dentro un div
<div>
<h1>Testo a cui verrà applicata la formattazione</h1>
</div>
<h1>qui non verrà applicata la formattazione</h1>
Selettore dell’elemento figlio
Con l’utilizzo di questi selettori la formattazione verrà applicata solo all’elemento “figlio” dell’ altro, e cioè a quell’elemento che ha una discendenza di primo livello. E’ da ricordare che questo selettore non è supportato da Internet Explorer su Windows.
body > h1{color:red;}
In questo caso la formattazione verrà applicata a tutti i tag h1 che sono “figli del body”.
<body>
<h1>Testo a cui verrà applicata la formattazione</h1>
<div>
<h1>Qui non verrà applicata la formattazione</h1>
</div>
<h1>Ho chiuso il tag div quindi questo è un tag discendente del body</h1>
</body>
Selettore dell’elemento adiacente
Con questo selettore viene applicata la formattazione a tutti quegli elementi che nel documento sono vicini l’uno all’altro, anche questo selettore non è suppportato da Internet Explorer.
h1+p{color:white:}
quindi in questo caso la formattazione verrà applicata a tutti i paragrafi che sono vicini al tag <h1>
<h1>Titolo</h1>
<p>A questo paragrafo verrà applicata la formattazione</p>
<p>A questo paragrafo non verrà applicata la formattazione perché non è adiacente al tag h1</p>
Selettore dell’attributo
Seleziona gli elementi presenti nel documento facendo riferimento alll’attributo e al valore di quest’ultimo. I selettori dell’attributo hanno diverse sintassi di utilizzo.
Attributo semplice
Elemento[attributo]
Così facendo verranno selezionati tutti gli elementi che presentano nel codice l’attributo secificato.
img[alt]{border:1 px solid black;}
In questo modo verrà applicato un bordo di un pixel intorno ad ogni immagine a cui e stato specificato l’attributo alt, a prescindere dal suo valore.
Attributo con valore
La sintassi è come la precedente ma con la differenza che la formattazione verrà applicata a tutti gli elementi a cui è stato assegnato un determinato valore all’attributo:
input[id=”vincenzo”]
in questo caso la formattazione verrà applicata a tutti quei tag input che hanno il valore “vincenzo” all’attributo id.
Attributo il cui valore contiene una stringa di caratteri
img[alt t=”Questa è la mia foto”]{border:1px dotted red;}
In questo caso verrà visualizzato un bordo rosso di un pixel intorno a tutte quelle immagini che contengono nell’attributo alt “Questà è la mia foto”. E’ da notare che la formattazione verrà applicata anche ad un’immagine che contiene nell’attributo alt “Ciao a tutti. Questa è la mia foto preferita”, l’importante è che contene la parte di stringa specificata nella dichiarazione.
Attributo il cui valore inizia con una stringa
img[alt|=”ciao”]{border:1px solid white}
In questo caso la formattazione verrà applicata a tutte le immagini in cui, il valore dell’attributo alt, inizia con la stringa “ciao”.
|
Css 
Copyright © 2007-2008