MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

::selection

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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+.

Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. (based on discussion in the W3C Style mailing list).

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.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: Swear
 Ultima modifica di: Swear,