Pseudoelementos – CSS

Como cambiar el color por defecto de un texto seleccionado

Al seleccionar parte de un texto en una página web, el navegador aplica por defecto un color blanco sobre el texto y un color azul sobre el fondo del texto, con el selector «::selection» podemos aplicar ciertas reglas sobre las propiedades «color», «background», «background-color» y «text-shadow».

La sintaxis es muy sencilla, en el siguiente ejemplo te muestro el código para definir un texto seleccionado en color azul y fondo naranja:

/*** Firefox ***/
::-moz-selection{ 
	color:#184583;
	background:#99CC00;
} 
/*** IE9 Opera Chrome ***/ 
::selection{
	color:#184583;
	background:#99CC00;
}

Este pseudo-elemento no está aconsejado en entornos de producción, no funciona en IE 8 ni versiones anteriores y no está descrito en ninguna especificación, es por esto que muchos desarrolladores desaconsejan su uso, no obstante puedes usarlo en tus proyectos y es posible que sea añadido en futuras especificaciones del W3C.