Selettori di attributo e pseudo-classi CSS 3
Il gruppo di lavoro che definisce la specifica CSS 3 ha adottato un diverso metodo di sviluppo della stessa. Mentre con le specifiche CSS 1 e 2 abbiamo riscontrato un approccio di sviluppo monolitico, nella specifica CSS 3 si è passati a un approccio modulare. Questo ha reso possibile che i blocchi già collaudati e pronti ad essere usati in produzione venissero segnati come recommended.
In questo articolo si approfondiranno i selettori d’attributo e le pseudo-classi CSS 3.
Queste nuove regole ci semplificheranno la vita nello sviluppo dei contenuti e stili web, poiché agiscono ed intervengono capillarmente ed in modo preciso anche in un documento web complesso. Non solo, queste regole sono meno “invasive”,ovvero, possono dare stile senza dover intervenire sulla struttura HTML: si pensi a ID e CLASS.
Ora passiamo nella spiegazione e comprensione con facili esempi annessi:
elem[attr~=”val”]
La regola si applica all’elemento di tipo elem al cui attributo attr sia stato assegnato un valore composto da una lista di valori separati da spazio e una di esse sia uguale a val.
Esempio:
Listato HTML 5
<img src=”fiori.jpg” title=”Mix di Margherite, Tulipani e Ibiscus” />
Listato CSS 3
img[title~=”Tulipani”] { border: 3px solid #000;
float: right;
}
elem[attr|=”val”]
La regola si applica all’elemento di tipo elem al cui attributo attr sia stato assegnato un valore composto da una lista di parole separate da trattino e la prima di questa lista corrisponda esattamente a val.
Listato HTML 5
<p>Mi chiamo Ivan e sono nato il: <time datetime=”1985-07-23” pubdate>23 Luglio 1985</time></p>
Listato CSS 3
time[datetime|=”1985”] { font: bolder 130% Georgia, serif;}
elem[attr^=”val”]
Questo selettore identifica tutti gli elementi di tipo elem per cui è definito l’attributo attr e il cui valore inizi per val.
Listato HTML 5
<p> Se volete scrivermi contattatemi all’email: <a href=”mailto:fuuu@example.org”>fuuu@example.org</a> o se volete visitare il sito al seguente indirizzo: <a href=”http://www.example.org”>www.example.org</a></p>
Listato CSS 3
a[href^=”mailto:”] { text-decoration: none;
color: red;
}
In questo caso la dichiarazione si verificherà solo per la email,poichè abbiamo specificato la relazione tra <a> e “mailto:”.
elem[attr*=”val”]
Listato HTML 5
<p>Stephen King nasce il <time datetime=”1947-09-21” pubdate>21 settembre del ’47,</time> il primo romanzo che scrisse fu Carrie nel <time datetime=”1974-05-24” pubdate> 1974,</time> il mio romanzo preferito è Shining scritto nel <time datetime=”1977-07-13” pubdate> ’77,</time></p>
Listato CSS 3
time[datetime*=”-09-“]
In questo caso la dichiarazione dà stile solo alla data di nascita di Stephen King poiche abbiamo dichiarato come riferimento il mese, “-09-”, che nel listato compare solo in un caso.
Dicasi lo stesso se volessimo dichiarare il giorno anzichè il mese.
Voglio dare stile all’anno della pubblicazione di “Carrie” attraverso il giorno,come faccio?
time[datetime*=”-24”]
elem[attr$=”val”]
listato HTML 5
<img src=”image.jpg” alt=”” />
<img src=”image.gif” alt=”” />
<img src=”image.png” alt=”” />
Listato CSS 3
img[src$=”.png”]
Questa dichiarazione identifica, in questo specifico esempio, solo esclusivamente l’immagine con l’estensione .png.Se volessimo dichiarare le altre estensioni,basta modificare l’estensione, ovvero:
img[src$=”.jpg”]
img[src$=”.gif”]
Pseudo-selettori
elem:root
Questa pseudo-classe identifica sempre la radice HTML. Ricordiamo che root in inglese significa radice.
Esempio:
html:root
elem:empty
Identifica degli elementi che non hanno dentro ne testo ne altri tag annidati. Da non confondersi con tag vuoti “/>”.
Listato HTML 5
<p>LOREM IPSUM</p>
<p></p>
<p>I LOVE CSS 3</p>
Listato CSS 3
p:empty { border: 2px solid orange;}
La dichiarazione stilizzerà un bordo arancione di 2 pixel soltanto al secondo <p>, poichè appunto è vuoto.
elem:only-child
La regola si applica solo se un elemento padre ha all’interno un elemento figlio.
Listato HTML 5
<p>Ciao mi chiamo <span>Ivan</span> e sto scrivendo un articolo sui CSS 3</p>
Listato CSS 3
span:only-child { border: 2px solid orange;}
elem:only-of-type
La regola si applica solo se c’è esclusivamente un solo tipo di elemento all’interno dell’elemento padre.
Listato HTML 5
<p>Ciao sono <strong>Ivan</strong>,ho <em>26 anni</em> e sono <mark>web developer</mark></p>.
Listato CSS 3
strong:only-of-type { color: #ff0034;}
La regola nth:child-of-type non si applica in questo caso:
ListatoHTML 5
<p>Ciao sono <strong>Ivan</strong> e ho <strong>26 anni</strong></p>
elem:nth-child(even)
elem:nth-child(odd)
Ho raggruppato queste due regole per facilitare la comprensione. Tali regole applicano lo stile per :nth-child(odd) un elemento dispari.Viceversa, la regola :nth-child(even) applica lo stile ad un elemento pari.
Classico esempio si può avere con dare colore in alternanza a delle righe di tabelle:
Listato CSS 3
tr:nth-child(even) { color: #ffa100;
background: #000;}
tr:nth-child(odd) { color: #b70707;
background: #fff;}
Oltre a (odd) e (even) e :nth-child(n), (dove “n” soddisfa un numero preciso), di facile comprensione per l’umano,può trasformarsi in espressione del tipo :nth-child(an+b) molto più versatile ed efficiente.
elem:nth-last-child(n)
Come dice la stessa parola “last” conta (n) a partire dall’ultimo elenco.
Si pensi ad una lista di canzoni,si vuole stilizzare il 5° titolo, esempio:
Listato HTML 5
<h1>Album Meteora – Linkin Park</h1>
<ul>
<li>Foreword</li>
<li>Don’t Stay</li>
<li>Somewhere I Belong</li>
<li>Liyng From You</li>
<li>Hit The Floor</li>
<li>Easier To Run</li>
<li>Faint</li>
<li>Figure N°9</li>
<li>Breaking the Habit</li>
<li>From The Inside</li>
<li>Nobody’s Listening</li>
<li>Session</li>
<li>Numb</li>
</ul>
Se volessimo dare risalto al titolo Breaking The Habit editeremo con i CSS 3 questa dichiarazione:
Listato CSS 3
li:nth-last-child(5)
Sono partito dall’ultima riga, ovvero da Numb, e ho contato dal basso verso l’alto per arrivare fino a 5, quindi non sarà come si presume la canzone Hit The Floor, ma sarà appunto Breaking The Habit.
elem:nth-of-type(n)
Può essere applicata ad una serie di immagini in modo da disporle alternativamente a sinistra e a destra del testo.
Listato CSS 3
img:nth-of-type(odd) { float: left;}
img:nth-of-type(even) {float: right;}
Qui di seguito elenco velocemente altre pseudoclassi.
elem: last-child
Es. a:last-child { text-decoration:none;}
elem:last-of-type
Es. p:last-of-type { margin: 2em;}
elem:target
element:enabled
element:disabled
element:checked
Queste tre pseudo-classi sono ideate per i form.
Es. input[type=”text”]:enabled
input[type=”email”]:disabled
:checked
elem:not()
Questo selettore,detto di esclusione, agisce su tutti gli elementi tranne quello dichiarato tra parentesi,ad esempio:
p:not(#articolo_infinito)
In questo caso da stile a tutti i <p> tranne a <p id=”articolo_infinito”>
E ~ F
Questa pseudoclasse applica stile all’elemento F se si trova dopo l’elemento E, ed entrambi gli elementi condividono l’elemento padre.
Listato HTML5
<div>
<h1>Testo Heading</h1>
<p id=”par”>paragrafo</p>
</div>
Listato CSS 3
H1 ~ #par { background: #ff9090;}
L'Autore
Ivan Zammitti, web developer freelance.In principio indirizzato verso il graphic design, ha trovato il suo obiettivo nella vita come web developer front/back end. Specializzando in html/css/javascript/php ama condividere tecniche seguendo l'approccio open source e l'etica hacker. Il suo motto è "Code is poetry".
Aggiungi a Google
8 Commenti
Non ci ho capito una mazza!!!
POVERO ME!
@Web designer Freelance Eh ma guarda, anch’io quando li ho studiati ho capito poco,ma poi provando e riprovando, facendo prove e controprove sul codice vedrai che t’impratichisci e ti verrà normale.
Interessanti i selettori di attributo, che sinceramente non avevo mai visto….c’è sempre da imparare!!!
Mi sono promesso che prima o poi me li studio tutti nel dettaglio. Però poi ogni volta che li vedo mi cadono le balle… =)
all’occorrenza servono sempre. per completare l’informazione, da che browser in poi sono supportati?
@Lauryn pardon. Sono supportati a partire da: Chrome5+, FF3.5+,IE9, Opera10.1, Safari3.2.
@Daniele ahahahahah….Basta metterci un pomeriggio ed è fatta..basta capire il meccanismo.Trovo anche alcune novità,non dico inutili ma quasi…. come :root e :empty
thanks
You’re welcome