Introducción a las pseudo clases de CSS3

Ya hemos hablado anteriormente de la nueva especificación modular de CSS Level 3 o más comúnmente conocido como CSS3. Hoy voy a hacer una introducción a las pseudo clases de CSS3 para conocer la nueva funcionalidad que además está ya ampliamente implementada en la mayoría de los navegadores actuales.

Pero para hablar de las pseudo clases en CSS3 primero tenemos que hacer una pequeña introducción para explicar que es una pseudo clase y para que se usa.

¿Qué es una pseudo clase?

Muchos elementos del lenguaje de marcas HTML disponen de estados especiales o usos asociados a ellos. Podemos aplicar estilos diferentes a estos elementos basándonos en esos estados o usos en nuestra hojas de estilo CSS. Por ejemplo, el elemento a tiene cuatro estados:

• normal: Su estado normal

• visited: Cuando ya hemos visitado el link al que hace referencia

• hover: Cuando tenemos el cursor situado encima del mismo

• active: Cuando hacemos click sobre él

Una pseudo clase es un estado o uso predefinido de un elemento al que se le puede aplicar un estilo independientemente de su estado por defecto. Existen cuatro tipos diferentes de pseudo clases:

• Links: Estas pseudo clases se usan para dar estilo al enlace tanto en su estado normal por defecto como cuando ya ha sido visitado, mientras mantenemos el cursor encima de él o cuando hacemos click en él

• Dinamicas: Estas pseudo clases pueden ser aplicadas a cualquier elemento para definir como se muestran cuando el cursor está situado sobre ellos, o haciendo click en ellos o bien cuando son seleccionados

• Estructurales: Permiten dar estilo a elementos basándonos en una posición numérica exacta del elemento

• Otras: Algunos elementos pueden ser estilizados de manera diferente basándonos en el lenguaje o que tipo de etiqueta no son

A continuación puedes ver una tabla con todas las pseudo clases soportadas:

Formato	Nombre	A los elementos se les aplica estilo si...	Compatibilidad
Pseudo clases de Enlace y Dinámicos
:link	Enlace	el valor del atributo href no está en el histórico	IE4, FF1, O3.5, S1, CSS1
:visited	Enlace Visitado	el valor del atributo href está en el histórico	IE4, FF1, O3.5, S1, CSS1
:target	Enlace Objetivo	un enlace objetivo	FF1.3, O9.5, S1.3, CSS3
:active	Activo	se ha hecho click sobre el elemento	IE7, FF1, O3.5, S1, CSS1
:hover	Sobre	el cursor se encuentra sobre el elemento	IE4*, FF1, O3.5, S1, CSS2
:focus	Foco	el elemento captura el foco del documento	IE7, FF1, O7, S1, CSS2
* Solo disponible para el elemento a antes de IE7
Pseudo clases Estructurales y Otras
:root	Raíz	es el elemento principal de un documento	FF1.5, O9.5, S3.1, C3, CSS3
:empty	Vacío	no tiene nodos hijos	FF1.5, O9.5, S3.1, C3, CSS3
:only-child	Hijo Único	no tiene nodos hermanos	FF1.5, O9.5, S3.1, C3, CSS3
:only-of-type	Solo del Tipo	tiene un selector único entre sus hermanos	FF1.5, O9.5, S3.1, C3, CSS3
:first-child	Primer Hijo	es el primer nodo hijo de otro elemento	FF1.5, O9.5, S3.1, C3, CSS3
:nth-of-type(n)	Nth del Tipo	es el nth elemento con ese selector	FF1.5, O9.5, S3.1, C3, CSS3
:last-child	Último Hijo	es el último nodo hijo de un elemento	FF1.5, O9.5, S3.1, C3, CSS3
:first-of-type	Primero del Tipo	es el primer elemento de su tipo de selector en el elemento primario	FF1.5, O9.5, S3.1, C3, CSS3
:last-of-type	Último del Tipo	es el último elemento de su tipo de selector en el elemento primario	FF1.5, O9.5, S3.1, C3, CSS3
:lang	Lenguaje	tiene un código de lenguaje específicamente definido	IE8, FF1.5, O9.5, S3.1, C3, CSS2.1
:not	Negación	no está usando un selector específico	FF1.5, O9.5, S3.1, C3, CSS3
* Parece ser que IE9 soporta todas las pseudo clases. Y pasa los tests de CSS3.info

Nuevo en CSS3

Algunas veces, los diseñadores necesitan dar estilo al primer elemento nodo hijo de otro elemento. Esto es muy habitual por ejemplo con las listas. El pseudo elemento :first-child ha estado disponible desde CSS2, sin embargo CSS3 ofrece mucha más potencia a la hora de trabajar con este tipo de problema. Como hemos podido apreciar en la tabla anterior, muchas pseudo clases han sido añadidas para ayudar con ese problema espećifico.

:first-child

Fija el aspecto del primer elemento de un tipo de selector si es el primer nodo hijo de su elemento padre.

:first-of-type

Fija el aspecto del primer elemento de un tipo de selector si es el primer nodo hijo que aparece con su tipo de selector en su elemento padre (esto parece complejo pero en los ejemplos veremos que no lo es).

:nth-child(#)

Fija el aspecto de una ocurrencia específica del elemento nodo hijo especificado. Por ejemplo, el tercer elemento nodo hijo de una lista no ordenada sería li:nth-child(3). Además se pueden usar pequeñas expresiones como parámetro para por ejemplo seleccionar todos los elementos impares: li:nth-child(2n+1);, los pares: li:nth-child(2n);. Los elementos impares también pueden ser seleccionados con li:nth-child(odd);

:nth-of-type(#)

Fija la apariencia de una ocurrencia específica del elemento con el tipo de selector especificado en un elemento padre. Por ejemplo la segunda lista no ordenada sería ul:nth-of-type(2). También permite los mismos parámetros que :nth-child(#).

:nth-last-of-type(#)

Fija el aspecto de una ocurrencia específica del elemento con el tipo de selector especificado pero desde abajo. Por ejemplo la octava lista no ordenada empezando por abajo sería ul:nth-last-of-type(8). También le es aplicable la parametrización de :nth-child(#). Para más información sobre las pseudo clases estructurales puedes visitar la página de la especificación en la W3C.

:last-child

Fija el aspecto del último hijo del tipo de selector de un elemento padre.

:last-of-type

Fija el aspecto de la última instancia de un selector particular en el elemento padre.

El mega ejemplo

Bueno, voy a escribir un cacho de ejemplo para mostrar todo esto utilizando las conocidas listas no ordenadas:

    
Primero
    
Segundo
    
Tercero
    
Cuarto
    
Quinto

Ya tenemos el código HTML ahora vamos a escribir el CSS:

li:first-child { font-size: .9em; }
li:first-of-type { color: blue; }
li:nth-of-type(4) { font-size: 2em; }
li:nth-last-of-type(3) { font-size: 1.5em; }
li:last-of-type { color: blue; }
li:last-child { font-size: 2.5em; }

Esto debe de renderizar los elementos de la lista de menor a mayor tamaño de fuente y el primer y último elemento de la lista deben ser azules:

• Primero
• Segundo
• Tercero
• Cuarto
• Quinto

Aplicando estilo a idiomas en particular

La pseudo clase :lang() nos permite especificar estilos que dependen del idioma especificado por la propiedad language:

Esto es Castellano
This is English

Ahora el código CSS:

p:lang(en) {
    color: blue;
    font-style: italic;
    font-weight: bold;
}

Esto mostraría el párrafo en Inglés en cursiva y negrita:

Pasando de aplicar estilo a un elemento

Si no queremos dar estilo a un selector específico, ahora podemos hacerlo gracias al pseudo elemento :not:

Esto es una serie de párrafos para no perder costumbre con el elemento del ejemplo
Yo no debo de tener el estilo del resto de párrafos por que soy guai
Y bueno, es un ejemplo muy tonto pero funciona. ¿no?

Ahora el código CSS:

p:not(.notme) {
    color: blue;
    font-style: italic;
}

El párrafo del medio no debería de tener la fuente en color azul y cursiva:

Conclusión

En esta introducción a las pseudo clases de CSS3 hemos podido comprobar el gran potencial que nos aportan estas nuevas funcionalidades que nos apartan de la necesidad de utilizar atributos de tipo style dentro de nuestros elementos que como ya sabéis es una muy mala práctica.

En Genbeta Dev | Introducción a CSS3