Cambiar el color del texto seleccionado con CSS

Cuándo seleccionamos texto en una página web, el fragmento seleccionado queda resaltado con un color de fondo y un color de fuente determinado. Los colores utilizados dependen del navegador y sistema operativo, no hay un estándar al respecto, pero podemos utilizar el selector CSS ::selection para establecer otros diferentes.

Antes de seguir, has de saber que el selector CSS ::selection fue propuesto para CSS3 pero finalmente fue descartado y actualmente no está incluido en ningún estándar, aunque está incluido en el borrador CSS Pseudo-Elements Module Level 4.

El selector ::selection admite las siguientes propiedades CSS:

color: para establecer el color de fuente
background-color: para establecer el color de fondo
text-shadow: para establecer un efecto de sombreado del texto

Por ejemplo, el siguiente CSS se aplicaría al texto seleccionado contenido en elementos <p>:

p::selection {
    background: green;
    color: black;
    text-shadow: 1px 1px #fff;
}

/* Firefox */
p::-moz-selection {
    background: green;
    color: black;
    text-shadow: 1px 1px #fff;
}

Cambiar el color del texto seleccionado con CSS CSS

Ejemplo