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% 
Podéis encontrar una buena ayuda en: W3C: CSS3 Selectors
Twittea esto Guardalo en Delicious Compartelo en Facebook
