Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del código HTML. Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructura del documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles.
Ya hemos visto un ejemplo de pseudo-clase: para referirnos al primer hijo de un elemento usábamos :first-child. El resto de pseudo-clases y pseudo-elementos tienen un tratamiento similar.
Las pseudo-clases clasifican a los elementos basándose en el estado del elemento, atributos que no puede deducirse de la estructura del documento. Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento.
Los navegadores normalmente visualizan de forma diferente los enlaces (links ) visitados de los no visitados. En CSS, esta visualización se puede definir a través de las pseudo-clases :link y :visited. De este modo podemos definir el estilo para los links que aparecen en nuestras páginas y otro estilo para esos links cuando ya han sido visitados. En HTML, dentro de la etiqueta body también se puede especificar un color para los links y otro para los links visitados, pero con CSS se pueden cambiar muchos otros atributos.
a:link { color: red; font-weight: bold; text-decoration: none }
a:visited { color: blue; }
En el ejemplo, los links sin visitar aparecen en color rojo, en negrita y sin subrayar, mientras que los visitados aparecen en azul.
Las pseudo-clases clasifican a los elementos basándose en el estado del elemento, atributos que no puede deducirse de la estructura del documento. Las pseudo-clases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento.
Estas son las pseudo-clases dinámicas:
:hover se aplica cuando el cursor del mouse señala el
elemento. :active se aplica cuando el elemento es activado (por ejemplo,
cuando el usuario presiona el botón del mouse). :focus se aplica cuando el elemento recibe el foco. Uno de los mayores desvelos de los diseñadores de páginas Web han sido siempre los links y la manera de hacer que estos cambien de aspecto al ser señalados por el mouse. Con frecuencia, la solución consistía en utilizar dos imágenes que se cambiaban mediante JavaScript u otro lenguaje. Afortunadamente, con CSS podemos simplificar todo el proceso y obtener efectos muy variados en nuestros enlaces.
Normalmente, se utilizan las cuatro pseudo-clases siguientes para controlar el comportamiento de los links.
a:link {color: red}
a:visited {color: gray}
a:hover {color: blue}
a:active {color: fuchsia}
Aquí especificamos un color rojo para los links, un color gris para los ya visitados, un color azul cuando es señalado y un fucsia cuando es activado. Se debe tener en cuenta que, por las reglas de cascada, el orden en que deben ser especificadas estas cuatro pseudo-clases para que funcionen correctamente es el que se ha usado en el ejemplo.
En HTML es posible especificar el idioma que se usa en un elemento mediante
el atributo lang. Por ejemplo, para identificar que un párrafo
está en francés se usa:
<P lang:"fr">
El código para identificar el idioma consta generalmente de dos letras:
"es" español, "en" inglés,
"de" alemán, "fr" francés,
etc. Mediante la pseudo-clase :lang podemos seleccionar elementos
en base a su idioma.
Como cada idioma tiene sus propias convenciones con respecto al formato (uso de itálicas, sangrías o comillas, por ejemplo), esta pseudo-clase nos permite describir cómo debe aparecer un elemento según el idioma usado. La siguiente regla especifica el tipo de comillas que debe usar un elemento q en francés:
q:lang(fr) { quotes: '« ' ' »' }
En la impresión sobre papel, a menudo se estila que la primer letra o la primer línea de un párrafo (o ambas cosas a la vez) tenga un formato diferenciado. Los pseudo-elementos :first-letter y :first-line permiten conseguir el mismo efecto al seleccionar la primer letra o línea de un elemento.
Por otro lado, :before y :after permiten insertar un contenido antes o después de un elemento. Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna marca identifica la primer letra de un párrafo, por ejemplo) pero son muy útiles para seleccionar elementos importantes dentro de la composición.
El pseudo-elemento :first-line permite aplicar un estilo determinado a la primera línea de un párrafo. Por ejemplo:
p:first-line { text-transform: uppercase }
Con la regla anterior conseguiríamos que todas las letras de la primera línea de los párrafos fueran convertidas en mayúsculas. Por supuesto, la medida de esta primer línea será determinada por el tamaño de la fuente, el ancho de la ventana, etc.
Sólo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la fuente, propiedades del color, propiedades del fondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.
El pseudo-elemento :first-letter nos permite seleccionar la primer letra de un elemento (generalmente un párrafo o cabecera), normalmente para utilizarla como capitular (en un tamaño mayor que el resto del párrafo).
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-weight: bold }
Las reglas anteriores determinan que los párrafos tengan una capitular en negritas del doble de tamaño que la fuente del párrafo.
Con los pseudo-elementos :before (antes) y :after
(después) se puede insertar un contenido antes o después
de un elemento determinado y definir el estilo del contenido insertado. La propiedad
'content', junto con estos pseudo-elementos, especifican lo que
se inserta.
Podemos lograr que antes de cada elemento <h3> aparezca
el texto "Tema:" sin necesidad de tener que escribirlo en
cada título. También podemos hacer que cada párrafo termine
con un pequeño icono o poner "Fin" al pie de
cada página usando las siguientes reglas.
h3:before {content: "Tema: "}
p:after {content: url("icono.gif")}
body:after {content: "Fin"; display: block;}
En la última regla hemos especificado también "display:
block" para que la palabra "Fin" comience en
una nueva línea (como si fuese un nuevo párrafo).