Sommario
Lo pseudo-elemento CSS ::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.
Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa ::selection nel suo selettore:
color
, background-color
, cursor
, outline
, text-decoration
, text-emphasis-color
and text-shadow
. Si noti, in particolare, che background-image
viene ignorato, come qualsiasi altra proprietà.
text-shadow
in ::selection
è supportato da Chrome, Safari e Firefox 17+.
Lo pseudo-elemento
::selection
venne in seguito riaggiunto in Pseudo-Elements Level 4.Esempio
Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: ::-moz-selection, ::selection {...}
. La regola verrà eliminata sui browser non-Gecko in quanto ::-moz-selection
non è valido per questi ultimi.
HTML
<div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
<p>Prova anche questo testo per <p></p>
CSS
/* rende giallo qualsiasi testo selezionato, su sfondo rosso */
::-moz-selection {
color: gold; background: red;
}
::selection {
color: gold; background: red;
}
/* rende bianco il testo selezionato, su sfondo nero */
p::-moz-selection {
color: white;
background: black;
}
p::selection {
color: white;
background: black;
}
Output
Specificazioni
Specificazione | Status | Commento |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::selection' in that specification. |
Working Draft | Initial definition |
Lo pseudo-elemento ::selection
ma questo venne rimosso prima di poter raggiungere lo status di Recommendation. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.
Compatibilità nei Browser
Caratteristica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Supporto di base | 1 | (Yes) | 1.0 -moz[1] | 9 | 9.5 | 1.1 |
Caratteristica | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Supporto di base | ? | ? | (Yes) | ? | ? | ? | ? |
[1] Attualmente Gecko supporta solamente la versione prefissata ::-moz-selection. Sarà resa senza prefisso in bug 509958.