Una delle dichiarazioni CSS3 sulla quale possiamo già mettere mano e il selettore ::selection, attraverso il quale possiamo andare a cambiare il colore di evidenziazione del testo. Il supporto attuale è garantito per: Internet Explorer: IE9+, Mozilla Firefox: 3+ (usando il prefisso -moz), Safari: 4+, Chrome: 3+, Opera: 10+. Sugli altri browser verrà mantenuta l’evidenziazione standard, qualcosa quindi di cui non preoccuparci affatto!

Vediamo subito il risultato di quello che possiamo fare con questo nuovo selettore:

Queste sono le dichiarazioni necessarie per garantire la maggior compatibilità possibile:

::selection {background:#FFDF00;}  ::-moz-selection {background:#FFDF00;}

Come potete notare il background è l’unica proprietà che possiamo modificare. Quello che quindi potremo fare sarà creare, ad esempio, paragrafi con colori di selezione differente, come realizzato nell’esempio della demo:

p.giallo::selection {background:#FFDF00;}  p.giallo::-moz-selection {background:#FFDF00;}  p.arancione::selection {background:#F90;}  p.arancione::-moz-selection {background:#F90;}  p.viola::selection {background:#C680FF;}  p.viola::-moz-selection {background:#C680FF;}

La dichiarazione è molto semplice! Una nota importante, non è possibile concatenare le proprietà scrivendo ad esempio: p.giallo::selection, p.giallo::-moz-selection. Questa dichiarazione NON funzionerà! Ricordate quindi, una riga per ogni dichiarazione. Dopodichè date libero sfogo alla vostra creatività!