Molto spesso ci troviamo nella situazione di dover applicare uno stile ad un solo elemento all’interno di un contenuto, nel quale sono presenti numerosi elementi dello stesso tipo; come ad esempio al primo e/o all’ultimo paragrafo all’interno di un post.
Letteralmente la pseudo-classe :first-child applica uno stile al primo elemento figlio di un determinato elemento padre, la pseudo-classe :last-child all’ultimo elemento figlio dell’elemento padre. E’ da notare, però, che queste pseudo-classi sono applicabili solamente a nodi HTML tag (paragrafi, bold, italic, link).
Facciamo un esempio, mettiamo il caso di voler rendere graficamente più accattivante un blocco di testo di tipo “blockquote”, una citazione per intenderci, aggiungendo il classico virgolettato all’inizio ed alla fine del blocco di testo.
Aggiungere le virgolette iniziali non sarà troppo complicato, basterà dichiarare nel nostro foglio di stile un blocco di codice di questo tipo:
blockquote { background: transparent url(img/quoteleft.png) left top no-repeat; }
Ma come aggiungere le virgolette finali?
Se dovessimo applicare uno stile a tutti gli elementi <p> figli di <blockquote>, ad esempio, avremmo tante virgolette di chiusura quanti sono i paragrafi che abbiamo scritto, con un effetto visivo non dei migliori.
E’ proprio per questo che esistono i selettori :first-child e :last-child, che ci permettono di applicare uno stile soltanto al primo o all’ultimo elemento figlio di un determinato contenitore, non impattando gli altri elementi dello stesso tipo.
Esempio CSS:
blockquote p:last-child { background: transparent url(img/quoteright.png) right bottom no-repeat; }
In questo modo abbiamo assegnato lo stile solamente all’ultimo elemento di tipo <p> contenuto all’interno di un <blockquote>.
Il risultato sarà più o meno come l’esempio qui sotto con gli apici di apertura “agganciati” al blockquote, e quelli di chiusura al suo ultimo paragrafo.
Questo è un campo di tipo blockquote, adattissimo per delle citazioni:
-Io non sarò mai nessuno, ma nessuno sarà mai come me (Jim Morrison)
Gli utilizzi applicabili a questo tipo di selettori sono molteplici. Potremmo utilizzarli per aggiungere un’immagine di apertura ed una di chiusura ad un blocco di tipo lista, ad esempio per una widget della nostra sidebar, l’unico vincolo sarà la nostra fantasia.
N.B: I selettori first-child e last-child non sono riconosciuti da IE6
