<div id="wrap">
  <div class="inner">
    <h1>Ejemplo de uso de <code>::selection</code></h1>
    <p class="red-pink">El texto seleccionado en este párrafo se verá con fondo rojo y texto rosa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
    
    <p class="green-black-shadow">El texto seleccionado en este párrafo se verá con fondo verde, texto en negro y texto sombreado. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
</div>

body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

h1 {
  font-size: 2em;
  margin-bottom: .5em;
}

p {
  margin-bottom: 1em;
}

#wrap {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}
.red-pink::selection {
  background: red;
  color: pink;
}
.green-black-shadow::selection {
  background: green;
  color: black;
  text-shadow: 1px 1px #fff;
}
.red-pink::-moz-selection {
  background: red;
  color: pink;
}
.green-black-shadow::-moz-selection {
  background: green;
  color: black;
  text-shadow: 1px 1px #fff;
}