CSS Level 3

CSS3 MOLA!

Nuevos Selectores CSS3

Además de las oportunidades que nos ofrecen a loa hora de hacer declaraciones CSS más precisas, tanto los nuevos selectores y pseudoclases, como los que ya existían pero no estban implementados en los browser, debemos tener en cuenta que en HTML5 tenemos nuevas herramientas para seleccionar elementos del DOM que aprovechan la flexibilidad de los selectores simples, los selectores combinados y ¿las pseudoclases y pseudoelementos? de CSS,

Vale la pena comparar los selectores disponibles en CSS2 con los que nos ofrece la nueva especificación CSS3

Vamos a fijarnos en las novedades que incorpora CSS level 3, aunque en realidad es como si fueran todos nuevos, ya que la novedad radica en que los browser que implementan HTML5 y CSS3 se supone que implementan todos los selectores que anteriormente no funcionaban, lo que nos permite usarlos a nuestro gusto:

Selectores de atributo

En CSS2 ya teníamos 4 selectores de atributo por presencia o por valor

[att]
Selecciona un elemento con el atributo "att" cualquiera que sea su valor
[att=val]
Selecciona un elemento con el atributo "att" cuando su valor es exactamente igual a "val"
[att~=val]
Selecciona un elemento con el atributo "att" cuando su valor es es una lista de valores separados por espacios, uno de los cuales es exactamente igual a "val"
[att|=val]
Selecciona un elemento con el atributo "att" cuando su valor es exactamente igual a "val" o comienza por "val" seguido de un guión "-"

CSS3 incorpora 3 selectores que permiten seleccionar, además, subcadenas dentro del valor del atributo

[att^=val]
Selecciona un elemento con el atributo "att" cuando su valor comienza con el prefijo "val"
[att$=val]
Selecciona un elemento con el atributo "att" cuando su valor termina con el sufijo "val"
[att*=val]
Selecciona un elemento con el atributo "att" cuando su valor contiene alguna instancia de "val"

Pseudoclasses

Se representan mediante dos puntos (semicolon) : seguidos del nombre de la pseudoclase y, opcionalmente, un valor entre paréntesis. Permiten selecciones basadas en valores que no están representados en la estructura del documento (document-tree) o valores que no pueden ser representados mediante los selectores simples.

CSS2 nos ofrecía una lista bastante limitada de pseudoclases dinámicas -E:link, E:visited, E:active, E:hover y E:focus - y sólo una de tipo estructural - E:first-child -.

Ahora tenemos muchas nuevas posibilidades que nos permiten hacer casi cualquier tipo de selección que se nos ocurra

E:target
Nos permite seleccionar y caracterizar cualquier elemento identificado por un atributo de tipo ID que haya sigo target de un enlace mediante dicho identificador.
E:lang

Permite seleccionar elementos por el lenguaje que tiene asignado, tanto si éste se ha asignado mediante un atributo lang=es como si viene heredado de de un ancestro, como en el ejemplo del párrafo que sigue

<body lang=fr>
	<p>Je suis français.</p>
</body>

dónde el uso de la nueva pseudoclase p:lang(fr) nos permite seleccionar el elemento p, mientras que *[lang|=fr] sólo permitiría seleccionar el elemento body.

Pseudoclasses estructurales

Nos permiten seleccionar elementos por su posición en el árbol del documento (document tree)

CSS2 nos ofrecía sólo una de tipo estructural - E:first-child -.

Ahora tenemos muchas nuevas posibilidades que nos permiten hacer casi cualquier tipo de selección que se nos ocurra:

E:root
en el 99.9% de los casos el elemento <html>
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:fist-child
ya estaba en CSS2
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
How To Use CSS3 Pseudo-Classes
CSS3 structural pseudo-class selector tester

Pseudoclases de estado de elemento de interfaz de usuario (UI element states pseudo-classes)

E:enabled
E:disabled
Selecciona un elemento de interfaz de usuario en función de si está habilitado o deshabilitado
E:checked
Selecciona un elemento de interfaz de usuario (checkbox o radio) si está seleccionado

Estas pseudoclases de estado de UI son sólo un avance de todo lo que incorpora o puede incorporar CSS3: CSS3 Basic User Interface Module

Selectores compuestos

La posibilidad de combinar selectores simples entre sí no es nueva, como tampoco lo esla de combinar selectores con pseudoclases, pero a causa de la deficiente implementación en browser antiguos, conviene dar un repaso a las combinaciones básicas de selecotes simples:

E F
Selecciona un elemento F que es descendiente (hijo, nieto, bisnieto, etc) de un elemento E
E > F
selecciona un elemento F que es hijo de un elemento E
E + F
selecciona un elemento F inmediatamente precedido de un elemento E
E ~ F
selecciona un elemento F precedido de un elemento E

Pseudoelementos

Se representan mediante doble dos puntos (double semicolon) ::, ya aunque algunos existían desde CSS1, y todos desde CSS2, la disponibilidad ahora con el CSS3 parece una vez más garantizada:

E::first-line
Perfecto para aplicar sangrías de primera línea.
E::first-letter
en combinación con el anterior nos permite adornar un texto con letras capitulares, tal y como hacían los monjes en la Edad Media (no confundir con la Tierra Media)
E::before
Una excelente alternativa para dibujar viñetas en las listas, aunque podemos hacer otras muchas cosas
E::after
Autoexplicado

Uso de namespaces con CSS3

ns|E
selecciona elementos con el nombre E incluídos en el namespace ns
*|E
selecciona elementos con el nombre E de cualquier namespace, incluídos los que no pertenecen a ningún namespace
|E
selecciona elementos con el nombre E sin namespace declarado
E
Si no se ha declarado un namespace por defecto, equivale a *|E, en caso contrario equivale a ns|E donde ns es el namespace declarado por defecto