El lenguaje CSS permite que el formato de las páginas web (y, por lo tanto, de los EPUB) tenga una complejidad cada vez mayor. Gracias a las etiquetas y las propiedades podemos dotar al texto de estilos casi tan complejos como los de cualquier maquetación tradicional en papel. Vamos a ver un par de reglas que nos facilitarán la tarea de asignar distintos estilos a diferentes partes del texto gracias al uso de los selectores avanzados.
Selectores CSS
Llamamos selectores a los elementos a los que se aplican las declaraciones dentro de una regla CSS. Por ejemplo:
h2 {color: red; }
En esa regla el elemento h2 sería el selector, mientras que {color: red; } sería la declaración que hacemos sobre el mismo. La declaración tiene una propiedad (color) y un valor (red).
Los selectores pueden tener distintas complejidades, y se los suele dividir en básicos y avanzados. Entre los básicos tenemos los de etiqueta, ID o clase:
div { color: red; font-size: 16px; }
#capitulo { background-color: red; }
.sangria { margin-left: 10px; }
También se cuenta como selector básico el conocido como «descendente». Mediante el uso de estos selectores escogemos los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. Veamos un ejemplo:
[CodePen height=300 show=html href=hLvol user=cuadratin ]
Si nos fijamos podremos comprobar que los elementos p que van dentro de un elemento div de clase capitulo serán de color rojo, mientras que el resto será del color por defecto de la plantilla.
Selectores CSS avanzados
Aunque existen varios selectores avanzados, por economía de espacio vamos a centrarnos en los dos más utilizados y que pueden dar mucho juego en nuestros EPUB: el selector de hijos y el selector adyacente.
El selector de hijos seleccionará un elemento que es «hijo» de manera directa de otro elemento. Se aplica con el signo de «mayor que» (>):
p > span { color: blue; }
Esta declaración quiere decir que todo elemento span que esté inmediatamente por debajo de un elemento p aplicará el color azul. Es importante señalar que todas las apariciones del elemento aplicarán la regla, como vemos en este ejemplo:
[CodePen height=300 show=html href=JcgGf user=cuadratin ]
Gracias a esta declaración podemos asignar formatos muy específicos, como el que acabamos de usar para aplicar un estilo concreto a todos los enlaces dentro del párrafo de clase texto.
El selector adyacente permite seleccionar elementos que se encuentran inmediatamente después de otros. Se utiliza con el signo + para relacionar ambos elementos:
[CodePen height=300 show=html href=wIHjf user=cuadratin ]
Como vemos, puede ser muy útil para aplicar un formato a todos los primeros párrafos de un texto, como se suele hacer en textos impresos.