Selettori avanzati

Prima che tu ti ponga il dubbio, te lo chiarisco io: il titolo non significa che mi avanzavano dei selettori!

Hai già potuto incontrare dei selettori nel corso di questo manuale: oltre a quelli classici, anche le pseudo classi sui link. Le pseudo classi, in realtà, non sono altro che dei selettori particolari, che invece di selezionare un elemento o una classe, selezionano uno stato. Di selettori ne esistono molti (in appendice hai una piccola tabella su tutti i possibili selettori), qui però mi soffermo solo su alcuni fra di essi, quelli che sicuramente ti saranno più utili.
I primi selettori che vedremo sono :first-child e :last-child. In questo caso vai a selezionare dei particolari elementi, ossia il primo o l’ultimo di un gruppo. Il funzionamento è semplicissimo e te lo illustro con un esempio:

ul li:first-child{
   color: tomato;
}

ul li:last-child{
   color: blue;
}

Questi stili significano semplicemente che il primo e l’ultimo elemento della lista avranno lo stile indicato.

Due piccoli selettori, che sicuramente ti serviranno, sono il selettore di paternità (o figliolanza) e quello di adiacenza. Il primo seleziona solo il primo figlio del genitore, il secondo, invece, seleziona l’elemento più prossimo a quel dato elemento. Ti faccio un esempio, partiamo dall’HTML:

Se tu volessi selezionare solo gli elementi di primo livello della lista (cioè quelli che stanno all’interno solo del primo <ul>), potresti scrivere:

ul.menu > li{}

Lo stile all’interno di questa regola verrebbe applicato unicamente ai figli diretti della lista con classe .menu. Gli altri elementi di lista non verrebbero minimamente toccati.

Poniamo adesso il caso, che tu vogli applicare uno stile a quel <div>, successivo alla lista. Però, quel particolare contenitore compare solo in quella posizione e solo in determinate occasioni. Una via —  quella senz’altro più semplice — è utilizzare la sua classe. L’altra via potrebbe essere quella che prevedere un selettore di adiacenza:

ul + div{}

Grazie al fatto che i due elementi sono adiacenti e consecutivi, lo stile verrà applicato. Se, per caso, tra <ul> e <div> si verrà a creare un altro elemento (un paragrafo, ad esempio), allora quella regola non sarà più valida, perché <div> non sarà più adiacente a <ul>.

Altri selettori che ti potrebbero far comodo, sono i selettori di attributo.
Poniamo il caso che tu abbia dei link all’interno di HTML e che tu desideri che solo quelli che puntano all’esterno vengano visualizzati in modo diverso. Solitamente, i link che puntano all’esterno — magari a servizi o argomenti analoghi a quello che tratta la tua pagina — dovrebbero avere l’attributo rel="nofollow". Come selezionare quindi solo questi elementi, senza far uso di una classe specifica?

a[rel="nofollow"]{
   background: url(images/external_link.gif) right center no-repeat;
   padding-right: 20px;
}

Anche nel caso tu non voglia usare nofollow per i link esterni al tuo sito, è buona norma usare l’attributo target="_blank"¹: anche in questo caso riusciresti ad applicare lo stile soprastante. Addirittura, potresti essere più estremo. Dato che l’attributo target va usato solo se vuoi aprire la pagina su una nuova finestra², potresti scriverlo così.

a[target]{
   background: url(images/external_link.gif) right center no-repeat;
   padding-right: 20px;
}