El pseudo-element CSS ::selection
aplica estils a la part d'un document que l'usuari ha ressaltat (com ara amb el ratol铆).
::selection {
color: gold;
background: red;
}
Nom茅s un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::selection
:
Tingueu en compte que, en particular, s'ignora background-image
.
Sintaxi
/* Firefox syntax */ ::-moz-selection ::selection
Exemple
HTML
<div>This text has special styles when you highlight it.</div>
<p>Also try selecting text in this paragraph.</p>
CSS
/* Make selected text gold on a red background */
::-moz-selection {
color: gold;
background: red;
}
::selection {
color: gold;
background: red;
}
/* Make selected text in a paragraph white on a blue background */
p::-moz-selection {
color: white;
background: blue;
}
p::selection {
color: white;
background: blue;
}
Resultat
Especificacions
Especificaci贸 | Estat | Comentari |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::selection' in that specification. |
Working Draft | Definici贸 inicial. |
Nota: Tot i que ::selection
estava present en els esborranys de CSS Selectors Nivell 3, es va eliminar durant la fase de Recomanaci贸 de Candidats perqu猫 el seu comportament no era suficientment especificat (especialment amb elements niats) i no es va aconseguir la interoperabilitat (basada en una discussi贸 en la llista de correu d'Estil W3C). El pseudo-element ::selection
ha estat retornat a Pseudo-Elements Nivell 4.
Navegadors compatibles
Nota: text-shadow
en ::selection
茅s compatible amb Chrome, Safari i Firefox 17+.
Descripci贸 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport b脿sic | 1 | (Yes) | 1.0 -moz[1] | 9 | 9.5 | 1.1 |
Descripci贸 | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Suport b脿sic | ? | ? | (Yes) | ? | ? | ? | ? |
[1] Gecko actualment nom茅s 茅s compatible amb la versi贸 prefixada ::-moz-selection. Ser脿 sense prefix en errada 509958.