CSS Tip #10 – Primi e ultimi

15 febbraio, 2010 - Tags: css tip, webdesign

I selettori Css in genere ci permettono di bersagliare oggetti specifici all’interno di strutture Html più o meno complesse, ma a volte siamo costretti a mettere mano a quest’ultimo per riuscire a prendere proprio solo ed esclusivamente l’ultimo o il primo oggetto di una serie… ma scavando a fondo nei meandri di questo linguaggio si scopre in realtà che esiste un selettore anche per quelle occasioni .

Abbiamo due pseudo selettori (tipo quello per il passaggio del mouse su un oggetto) per poter modificare gli aspetti dei primi e ultimi elementi di una serie, diciamo per esempio di una lista non ordinata:

• La minaccia fantasma
• L’attacco dei cloni
• La vendetta dei Sith
• Una nuova speranza
• L’impero colpisce ancora
• Il ritorno dello Jedi

ora vogliamo colorare i titoli del primo e dell’ultimo episodio rispettivamente in azzurro e verde, i selettori Css saranno:

li:first-child{
   color: aqua;
}
li:last-child{
   color: green;
}

• La minaccia fantasma
• L’attacco dei cloni
• La vendetta dei Sith
• Una nuova speranza
• L’impero colpisce ancora
• Il ritorno dello Jedi

Facile no?

Come sempre trovate tutti i codici nel CSS Tips - File di riferimento scaricabile liberamente.

Nessun articolo correlato.