CSS3: Un vistazo a los nuevos selectores

En cuanto nos descuidemos tenemos encima la nueva versión de CSS así que ya es hora de que empecemos a ponernos las pilas con el CSS3. Con esta nueva versión de las hojas de estilo aparecen muchos más selectores que los que teníamos hasta CSS2 y la verdad, ya nos iban haciendo falta. Por eso vamos a ir acostumbrándonos a ellos poco a poco ¡Empecemos!

Selectores generales en CSS3

* selecciona todo
E selecciona un elemento (E)
E.warning selecciona un elemento (E) con la clase warning
E#home selecciona un elemento (E) con la id home
E F selecciona el elemento F dentro del elemento E

Hasta aquí ya los conocíamos, ahora vienen los nuevos:

E:not(s) selecciona los elementos (E) que no contengan s
E > F selecciona los elementos hijos (F) del primer elemento (E)
E + F selecciona los elementos E y F hermanos, que están dentro de un mismo bloque
E ~ F selecciona los elementos F que aparezcan despues de E

p:not(".personal")
//Ejemplo: selecciona todos los párrafos que no tengan la clase personal

Selectores de atributos

Los podemos diferenciar porque van entre corchetes, estos ya se han convertido en mis favoritos.

E[foo] elemento con el atributo foo
E[foo=”bar”] elemento con el atributo foo y el valor idéntico a bar
E[foo~=”bar”] elemento con el atributo foo y contiene una lista de valores separados por espacios en blanco entre los cuales uno es idéntico a bar
E[foo^=”bar”] elemento con el atributo foo y que su valor comience por bar
E[foo$=”bar”] elemento con el atributo foo y que su valor termine por bar
E[foo*=”bar”] elemento con el atributo foo y que su valor contenga la cadena bar
E[hfoo|=”en”] elemento con el atributo foo y contiene una lista de valores separados por guiones donde el primer valor comience por en

a[href="http://blog.nnatali.com"]
//Ejemplo: selecciona todos los enlaces que vayan a esa url

Pseudo-classes

Separadas por dos puntos (:) del elemento, ya conociamos unas cuantas (E:link, E:visited, E:active, E:hover, E:focus) y ahora nos amplian la lista bastante más.

E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty elementos E vacíos, que no tengan hijos
E:target elementos E que enlacen a un url
E:lang(fr) elementos en el idioma especificado
E:enabled elementos activados (formularios)
E:disabled elementos desactivados (formularios)
E:checked solo validos para radiobutton o checkbox (formularios)

html:lang(en)
//Ejemplo: selecciono todos los elementos de idioma inglés

Pseudo-elementos

Hay veces que aplicar estilo a un elemento se nos queda corto, para eso tenemos los pseudo-elementos.

E::first-line selecciona la primera linea del elemento
E::first-letter selecciona la primera letra del elemento
E::before y E::after ya veníamos utilizándolos desde CSS2 para generar contenido adicional junto a la propiedad content.

p::first-letter
//Ejemplo: selecciono la primera letra de los párrafos

Sí, ya sé, me faltan unas cuantas pseudo-clases por analizar, pero no pretendáis que haga yo sola todo el trabajo! A ver quién se anima a contarnos lo que hacen y podemos completar nuestra lista al 100% :D

Podéis encontrar una buena ayuda en: W3C: CSS3 Selectors