CSS: Pseudo-clases y pseudo-elementos

Los pseudo-elementos y las pseudo-clases se definen para poder aplicar estilos en algunos elementos, o partes de un elemento, en casos especiales que no quedan cubiertos con los selectores habituales. Nos permiten seleccionar, por ejemplo, la primera letra de una línea, la primera línea de un párrafo, un link cuando ya ha sido pulsado, etc.
La sintaxis es la misma en los dos casos:

 a:visited {
 /*esto es una pseudo-clase*/
 }

p:first-line {
 /*esto es un pseudo-elemento*/
 }
 

CSS3 introduce una diferencia, recomienda utilizar “::” para los pseudo elementos, para diferenciarlos de las pseudo clases:

 a:visited {
 /*esto es una pseudo-clase*/
 }

p::first-line {
 /*esto es un pseudo-elemento*/
 }
 

De todas formas el mismo estándar especifica que los navegadores deben continuar soportando la notación anterior para evitar problemas de compatibilidad con código CSS antiguo, al menos para los pseudo-elementos definidos en CSS1 y CSS2 ( :first-line, :first-letter, :before and :after ).

pseudo-clases

Seleccionan un elemento que cumple alguna condición o estado determinado, por ejemplo un link cuando el ratón está encima ( a:hover) o un elemento cuando es el primero dentro del elemento padre ( li:first-child). Podría ser similar a aplicar una clase temporal a un elemento en un estado determinado.

Pseudo-clases especificas para enlaces :link y :visited

 
 a:link { color: blue; }
 

Aplica a todos los enlaces que todavía no han sido visitados. Aparecerían en color azul.

 
 a:visited { color: red; }
 

Aplica a los enlaces que ya han sido visitados. Aparecerían en color rojo.

Pseudo-clases dinámicas :hover, :active, :focus

Permiten cambiar el estilo en respuesta a alguna acción del usuario. Se utilizan a menudo en los enlaces, como las anteriores, pero pueden utilizarse en otros elementos.

 
 button:hover { color: green; }
 

Define un estilo que se muestra mientras el cursos está sobre el elemento. Es muy utilizado en enlaces y botones para hacer un ligero cambio de estilo que muestra claramente sobre que opción del menú nos encontramos.

 
 a:active { color: orange; }
 

Define un estilo diferente durante el momento en el que el elemento está siendo pulsado.

input:focus{ background-color:yellow; }

Se aplica a un elemento cuando recibe el foco.

:first-child

Selecciona un elemento sólo cuando es el primer hijo del elemento padre. Por ejemplo, la siguiente declaración:

p:first-child { background:yellow; }

Se aplicará a todos los párrafos que sean el primer elemento dentro de un contenedor. Si tenemos varios divs para dividir la página en columnas, los primeros párrafos de cada columna aparecerán en amarillo.

Para hacer que el primer elemento de una lista aparezca siempre en rojo:

li:first-child{ color: red; }

Lenguaje :lang

CSS nos permite seleccionar un elemento basandonos en el lenguaje que se ha definido mediante el atributo lang ( lang=“es”). Si tuvieramos dos párrafos definidos de la siguiente forma:

 
Esto es una casa
This is a house

Podríamos seleccionarlos y darles estilos diferentes:

 
p:lang(es) { color: red; }
p:lang(en) { color: blue; }

Pseudo-classes de CSS3

El nuevo estándar añade una cantidad importante de pseudo-clases nuevas a las que dedicaré un post en detalle más adelante ( :target, :root, :empty, :only-child, :only-of-type, :last-child, :nth-child, etc).

pseudo-elementos

Permiten seleccionar ciertos ‘elementos virtuales’ que no existen como tales en el DOM, por ejemplo la primera linea de texto en un párrafo ( p:first-line) o la primera letra de una línea (p:first-letter).

:first-line y :first-letter

Permiten seleccionar la primera línea de un elemento y la primera letra de un elemento, respectivamente.

p:first-line { color: gray; }
p:first-letter { text-transform: uppercase; }

Estas dos reglas CSS harían que la primera línea de cada párrafo fuera siempre de color gris y que la primera letra de cada párrafo aparezca en mayúsculas.

Estos dos pseudo-elementos sólo pueden aplicarse a elementos de bloque y a celdas de una tabla. No pueden aplicarse a un span, por ejemplo.

:before y :after

Se utilizan para insertar contenido, generado en nuestro CSS, al principio o al final de un elemento existente. Podemos también definir el estilo de este nuevo contenido dentro de la misma regla.

La propiedad content sirve para definir el contenido nuevo que se añade.

Por ejemplo, si tenemos una lista de artículos, podriamos utilizar el siguiente código CSS para colocar una indicación de NEW delante y detras de los elementos nuevos:

 
li.new:before {
    content: "NEW - ";
    background-color: green;
}

li.new:after {
    content: " - NEW";
    background-color: green;
}

Todos los elementos de la lista a los que coloquemos la clase “new” apareceran con ese texto extra para llamar la atención.

Cuidado al colocarlos separados por comas

Al utilizar estos elementos en nuestra hoja de estilos conviene tener en cuenta que, si los colocamos en una regla de CSS junto con otros selectores, separados por comas, el navegador que no soporte el pseudo-elemento ignorará los siguientes elementos de la lista, sin aplicarles el estilo.

En el siguiente ejemplo:

p:last-child, p.special {
 /* mis estilos */
}

IE8 no soporta last-child ( de CSS3) por lo que salta al final de la lista y tampoco aplica el estilo a los párrafos p.special.

References:
W3C CSS2 Pseudo-elements and pseudo-classes