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:

FormatoNombreA los elementos se les aplica estilo si...Compatibilidad
Pseudo clases de Enlace y Dinámicos
:linkEnlaceel valor del atributo href no está en el históricoIE4, FF1, O3.5, S1, CSS1
:visitedEnlace Visitadoel valor del atributo href está en el históricoIE4, FF1, O3.5, S1, CSS1
:targetEnlace Objetivoun enlace objetivoFF1.3, O9.5, S1.3, CSS3
:activeActivose ha hecho click sobre el elementoIE7, FF1, O3.5, S1, CSS1
:hoverSobreel cursor se encuentra sobre el elementoIE4*, FF1, O3.5, S1, CSS2
:focusFocoel elemento captura el foco del documentoIE7, FF1, O7, S1, CSS2
* Solo disponible para el elemento a antes de IE7
Pseudo clases Estructurales y Otras
:rootRaízes el elemento principal de un documentoFF1.5, O9.5, S3.1, C3, CSS3
:emptyVacíono tiene nodos hijosFF1.5, O9.5, S3.1, C3, CSS3
:only-childHijo Únicono tiene nodos hermanosFF1.5, O9.5, S3.1, C3, CSS3
:only-of-typeSolo del Tipotiene un selector único entre sus hermanosFF1.5, O9.5, S3.1, C3, CSS3
:first-childPrimer Hijoes el primer nodo hijo de otro elementoFF1.5, O9.5, S3.1, C3, CSS3
:nth-of-type(n)Nth del Tipoes el nth elemento con ese selectorFF1.5, O9.5, S3.1, C3, CSS3
:last-childÚltimo Hijoes el último nodo hijo de un elementoFF1.5, O9.5, S3.1, C3, CSS3
:first-of-typePrimero del Tipoes el primer elemento de su tipo de selector en el elemento primarioFF1.5, O9.5, S3.1, C3, CSS3
:last-of-typeÚltimo del Tipoes el último elemento de su tipo de selector en el elemento primarioFF1.5, O9.5, S3.1, C3, CSS3
:langLenguajetiene un código de lenguaje específicamente definidoIE8, FF1.5, O9.5, S3.1, C3, CSS2.1
:notNegaciónno está usando un selector específicoFF1.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:

Esto es Castellano

This is English

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:

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?

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

Portada de Genbeta