Selectores CSS: de básico a avanzado (parte 3: pseudo-elementos)

Finalizamos la serie sobre selectores de CSS con el último (pero no menos importante) tipo de selector: los pseudo-elementos. A través de ellos, podremos crear nuevos elementos secundarios, sin modificar nuestra estructura HTML. Pero, ¿cómo es posible? ¡Vamos a verlo!

Si después de las dos partes anteriores de la serie sobre selectores CSS pensabas que ya habías visto todo el potencial de CSS, te equivocas. Los pseudo-elementos (más concretamente los de contenido generado) nos permiten personalizar aún más. Comencemos primero definiendo qué es un pseudo-elemento.

Pseudo-elementos

Son elementos dinámicos que no existen como tal en el árbol de documento (no están definidos como etiquetas HTML, ni atributos, ni nada), pero, cuando se utilizan, se aplican estilos a ciertas partes de elementos, o se crean nuevos elementos secundarios.

Antes de comenzar con los tipos de pseudo-elementos, debes tener en cuenta que estos siempre se deben ir precedidos por un selector.

Pseudo-elementos textuales

Aquí nos encontramos con :first-lettery :first-line.

:first-letter aplica estilos a la primera letra que se encuentra en el contenido de un elemento.

:first-line es similar a la anterior, pero en este caso selecciona la primera línea de un elemento.

Veamos esto con un ejemplo.

CSS
.letter:first-letter {
  font-size: 2.5rem;
  color: #01579B;
}

.line:first-line {
  font-size: 1.5rem;
  color: #01579B;
}

See the Pen :first-letter and :first-line example by Sonia Ruiz (@yune) on CodePen.

Pseudo-elementos de contenido generado

Los pseudo-elementos de contenido generado, :before y :after crean un nuevo elemento inline dentro del elemento seleccionado. Son utilizados junto con la propiedad content para añadir contenido a este nuevo elemento, como un mensaje genérico o un símbolo, por ejemplo.

:before crea el elemento justo antes del contenido del elemento seleccionado.

:after crea el elemento justo después del contenido del elemento seleccionado.

Nos permiten hacer gran cantidad de cosas y pensamos con creatividad, aunque su uso más común es en listas personalizadas y para añadir iconos a campos de formulario y botones.

A continuación, puedes ver un ejemplo en el que se utiliza el pseudo-elemento :before para mostrar el nombre de cada etiqueta, arriba de esta.

CSS
h1:before {
  content: 'h1';
}

p:before {
  content: 'p';
}

h1:before, p:before {
  font-size: 1rem;
  font-weight: 900;
  position: absolute;
  top: -1.2em;
  left: -.7rem;
  color: rgba(50,50,50,.5);
}

See the Pen :before example by Sonia Ruiz (@yune) on CodePen.

::selection

El pseudo-elemento ::selection nos permite definir los estilos del texto de un elemento, cuando es seleccionado por el usuario. Ten en cuenta que en este caso es necesario indicar los dos puntos dos veces (::), en vez de una sola vez, como lo estábamos haciendo hasta ahora (:).

CSS
::selection {...}

Con el anterior ejemplo aplicaríamos estilos a cualquier texto seleccionado en la página. En el siguiente ejemplo también podemos ver cómo aplicarlos a distintos elementos.

See the Pen ::selection example by Sonia Ruiz (@yune) on CodePen.

Combinación

Antes de terminar, recuerda que puedes combinar selectores separándolos por una coma. De esta forma, no tendrás que repedir código.

CSS
.mi-elemento, p {...}

HTML
<h1 class="mi-elemento">Elemento seleccionado</h1>
<p>Elemento seleccionado</p>
<h1>...</h1>
<p>Elemento seleccionado</p>

Puedes combinar tantos como quieras, y del tipo que quieras, pero ten cuidado de no hacer tu código ilegible y poco comprensible.

Posibles conflictos

Aunque no hemos entrado en conceptos como cascada, herencia, y especificidad (esto daría para otra serie de artículos), debes conocer dichos conceptos para evitar conflictos entre reglas de CSS. Cuando se aplican varias reglas a un mismo elemento (con distintos selectores) se produce un conflicto, y el navegador debe determinar cuáles son las reglas que se van a aplicar, en función de determinadas reglas.

Supongamos que tenemos el siguiente fragmento de HTML:

HTML
<p class="mi-parrafo">Este es un ejemplo de un párrafo</p>

Y el siguiente código CSS:

CSS
.mi-parrafo {
    color: red;
}

p {
    color: blue;
}

Teóricamente, estilos se están aplicando al mismo elemento, aunque como puedes ver, se contradicen.

Entonces, ¿qué color se aplicaría al párrafo finalmente? ¿Por qué? Haz la prueba y mira el resultado. 😉

Para finalizar

Y con esto finalizamos la serie sobre selectores CSS, en la que hemos hecho un buen repaso de los más importantes. Recuerda que puedes consultar la recomendación oficial de la W3C para descubrir todos los que existen.

Puede que ahora te estés preguntado si en un futuro existirán nuevo selectores CSS, y si es así, cómo puedes saber cuáles. Si llegas a ese nivel de curiosidad, te invito a que le eches un vistazo al working draft sobre selectores de nivel 4 para ver qué se está cociendo (¡aunque todavía quedan años para que sea estándar!).

¿Después de todo esto te has quedado con ganas de más? Pues tengo más artículos sobre CSS en el blog: sobre contadores, flexbox, otras propiedades, etc.

Y si tienes alguna duda, o sugerencia, no dudes en dejarla en los comentarios o a través del formulario de contacto. ¡Estaré encantada de hablar contigo! 🙂