Pseudo-clases estructurales CSS3
En el tema Selectores CSS nivel4 encontrará una recopilación de todos los selectores incluyendo los nuevos de CSS nivel 4.
Selector pseudo-clase estructural
Los selectores de pseudo-clase estructural de CSS3 permiten una selección basada en otra información del árbol de elementos del documento pero que no puede extrarse con otros selectores simples o combinadores. En CSS2.1 teníamos sólo :first-child. En CSS3 los podemos agrupar así:
- Elemento raíz
:root - Hijos y tipos:
:nth-child(), :nth-last-child(), :first-child, :last-child, :only-child:nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-of-type
- Contenido
:empty
Pseudo-clase CSS3 :root
La pseudo-clase :root representa un elemento que es la raíz del documento, que para HTML siempre será el elemento <html>. No sabría decir que otras utilidades tiene esta pseudo-clase, pero podemos intentar aplicarla para cambiar el estilo genérico que tienen inicialmente los elementos HTML. Un selector formado con esta pseudo-clase como :root h1 tendría mayor especificidad de selector que usar el universal * h1 (equivalente a h1) o el de tipo como html h1. Esto puede ser útil si hemos de cambiar el estilo genérico de un elemento, como esos mismos encabezados, pero dándole una especificidad mayor que la del selector de tipo. Si en alguna hoja de estilo se declara :root h1 {...} sobrescribirá cualquier declaración con h1 {...} para las propiedades de estilo coincidentes.
De todas formas ya que hablamos de especificidad de selectores veámos una lista en orden creciente:
- Selector universal (se ignora, especificidad cero)
- Selector de tipo y pseudo-elementos
- Selectores de pseudo-clase, atributo y clase
- Selector de ID
- Estilo en línea
!importantsobrescribe cualquier estilo
Un ejemplo sobre especificidad de selectores y sobrescritura de estilos:
Ejemplo:
A1 A2 A3 A4
En este ejemplo usamos el elemento <abbr> dándole estilos que causan sobrescrituras. Con el selector de pseudo-clase :root abbr {...} le ponemos color rojo. Luego con el selector de tipo abbr {...} le cambiamos el color a magenta. Pero la pseudo-clase es más específica que el tipo y este color magenta es ignorado con el primer elemento <abbr>A1</abbr> del ejemplo que aparece en color rojo. Pero vea que al usar beige!important para el color de fondo sobrescribimos al color lime declarado en la pseudo-clase, pues !important se aplicará en cualquier caso.
El elemento en color azul es el resultado del selector de clase abbr.linroot {...} que sobrescribe a uno de pseudo-clase :root abbr {...}. El de color naranja es por el selector de ID var#idroot {...} que sobrescribe al anterior. Por último el de color marrón tiene un estilo en línea (en el atributo style del elemento) que sobrescribe también los anteriores.
Pseudo-clases CSS3 de hijos y tipos :nth-child(), :nth-of-type(), etc.
La pseudo-clase :nth-child(an+b) selecciona un elemento que tiene a×n+b-1 hermanos ubicados antes en el árbol del documento para algún valor de n mayor o igual que cero. Para valores de a>0 y b>0 esto significa dividir los hermanos en grupos de a elementos quedando el resto de la división en el último grupo y luego seleccionar los elementos ubicados en la posición b de cada grupo. El índice del primer elemento empieza en 1. Los valores a y b pueden ser menores o iguales a cero, pero el conjunto a×n+b tiene que ser mayor que cero para un n mayor o igual a cero que representa un elemento existente en los árbol del documento. El argumento puede tomar el valor odd que equivale a 2n+1, es decir, las posiciones impares en la lista que empieza en 1. También puede tomar el valor even para las posiciones pares que equivale a 2n+0.
Las pseudo-clases de hijos son:
:nth-child(an+b):nth-last-child(an+b)funciona igual que la anterior pero selecciona hermanos ubicados después en el árbol del documento.:first-childes equivalente a:nth-child(1)y es la única que ya existía en CSS2.1:first-child.:last-childes equivalente a:nth-last-child(1):only-childes equivalente a:first-child:last-childo bien a:nth-child(1):nth-last-child(1), seleccionando un elemento que es hijo único (es primer y último hijo).
Las pseudo-clases de tipos tienen el mismo esquema de funcionamiento, pero se seleccionan hermanos con el mismo tipo de elemento, mientras que con la de hijos se seleccionan todos los hijos.
:nth-of-type(an+b):nth-last-of-type(an+b):first-of-typeque es igual a:nth-of-type(1):last-of-typeque es igual a:nth-last-of-type(1):only-of-typeque es igual a:first-of-type:last-of-typey también es igual a:nth-of-type(1):nth-last-of-type(1)
En este primer ejemplo usaremos JavaScript para modificar una hoja de estilo de este documento. Disponemos de 16 elementos <span> para dotarles del color de fondo amarillo usando la pseudo-clase :nth-child(an+b), :nth-last-child(an+b), :nth-of-type(an+b) o :nth-last-of-type(an+b), con la facilidad de poder probar valores (a,b). Cuando modifiquemos un valor aparecerá la regla y estilo modificado.
Ejemplo:
div.spanes span:nth-child(2n+1) { background-color: yellow; }
Código completo de este ejemplo
El ejemplo anterior funciona en navegadores Opera 12.12, Firefox 17, Chrome 23 o Safari 5.1.7 y otros que soporten CSS3, aunque no funcionará en IE8. Nos permitirá probar valores para entender como funciona este selector. La hoja de estilo se modifica con JavaScript cuando cambiamos los valores (a,b). Esto se explica en el apartado las hojas de estilo stylesheet del primer tema. Probando con a=0 tenemos el selector :nth-child(0n+b) o :nth-last-child(0n+b), que es igual que escribir el selector :nth-child(b) o :nth-last-child(b), seleccionándose el b-ésimo elemento. Por ejemplo, con :nth-child(1) seleccionamos el primer elemento, que es lo mismo que usar :first-child. Con :nth-last-child(1) seleccionamos el último, lo mismo que si usáramos :last-child. La ejecución con los de hijo o tipo no se diferencian porque sólo hay elementos de tipo <span> hermanos.
En el siguiente ejemplo usamos odd y even para colorear las entradas impares (color lightgreen) y pares (color lightcyan) de una lista <ol><li>
Ejemplo:
- uno
- dos
- tres
- cuatro
Pseudo-clase CSS3 :empty
La pseudo-clase :empty selecciona un elemento que no tiene hijos. Sólo los elementos de tipo nodo y nodos de contenido (como nodos texto, secciones CDATA y referencias de entidades) tienen la capacidad de estar vacíos pues albegan datos con alguna longitud. Sobre otros elementos como comentarios, instrucciones de procesamiento y otros nodos no cabe hablar de si están o no vacíos desde el punto de vista del árbol del documento. Esta pseudo-clase sólo aplica a los elementos de tipo nodo, no a nodos texto ni otros mencionados antes.
Un ejemplo de un nodo vacío sería algo como <p></p>. Veámos un ejemplo:
Ejemplo:
El primer elemento es un párrafo sin contenido que aparece con el estilo dado por la pseudo-clase :empty. El segundo es un cuadro de texto que desde el punto de vista del árbol del documento es de por sí un elemento vacío, aplicándose también el estilo. Aunque su contenido está en el atributo value.