El selector ::selection CSS

Podemos seleccionar texto o imágenes de una página web, y todo el mundo sabe cómo hacerlo. También podemos dar formato al texto seleccionado utilizando el pseudo-elemento ::selection.
Inicialmente el pseudo-elemento ::selection fue pensado como parte del CSS3 pero fue suprimido antes de llegar a ser una recomendación. Actualmente aparece en el "Working Draft" ( borrador ) de CSS Pseudo-Elements Module Level 4  – o sea: CSS4.

Importante A diferencia de otros pseudo-elementos que pueden ser seleccionados utilizando dos puntos (:before) o doble dos puntos (::before), en el caso de ::selection los  doble dos puntos son obligatorios. Y no hay que olvidar los prefijos:

*::-moz-selection{color:red;}
*::selection{color:red;}

Por lastima no todo esta permitido. En este momento podemos modificar solo el
- color,
- el background-color ( el color de fondo ) y el
- text-shadow ( el sombreado de texto )
del texto seleccionado.

p.seleccion-test{font-size:24px;}
p.seleccion-test::-moz-selection{
 color:red; 
 background-color:#0000ff;
 text-shadow: 1px 2px 1px #fff;
}
p.seleccion-test::selection{
 color:red; 
 background-color:#0000ff;
 text-shadow: 1px 2px 1px #fff;
}

<p class="seleccion-test">Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas.</p>

Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas.

En el futuro podremos modificar otras propiedades como cursor, outline y text-decoration

Texto no seleccionable

También podemos hacer que el texto sea no seleccionable utilizando la propiedad user-select: none;. En el siguiente ejemplo no podrá seleccionar el primer párrafo. Por lo contrario podrá seleccionar el segundo.

p.no-seleccionable {
  -webkit-user-select: none;/* Chrome  y Safari */ 
     -moz-user-select: none;/* Firefox */
      -ms-user-select: none;/* IE 10+ */ 
          user-select: none;
}

<p class="no-seleccionable">Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas. Ojalá el corazón les bastara a ellos dos como a mí me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegría, me ofreció dos escogidas naranjas, finas, pesadas, redondas.</p>
<p>Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas.Ojalá el corazón les bastara a ellos dos como a mí me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegría, me ofreció dos escogidas naranjas, finas, pesadas, redondas.</p>

Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas. Ojalá el corazón les bastara a ellos dos como a mí me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegría, me ofreció dos escogidas naranjas, finas, pesadas, redondas.

Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas.Ojalá el corazón les bastara a ellos dos como a mí me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegría, me ofreció dos escogidas naranjas, finas, pesadas, redondas.

El método getSelection()

Aunque aquí hablamos de CSS, es interesante saber que en JavaScript el método getSelection() devuelve un objeto con las propiedades del texto seleccionado por el usuario.

var seleccion = window.getSelection();

Podemos recuperar el texto seleccionado llamando el método toString():

console.log( seleccion.toString() )

Lea más acerca del objeto selección