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
Aporto mi pequeño grano de arena para ampliar la información: Un artículo que escribí en Marzo de este mismo año, una traducción de un artículo original de Alexis Deveria en el que hacía un resumen de cuando podremos usar las cosas chulas como Selectores CSS 3, Canvas, etc. http://www.martinpulido.com/blog/diseno-web/cuando-podre-usar-selectores-css-3-canvas-svg-font-face/ Desgraciadamente, vamos a tener que seguir esperando mucho :(
Santi gracias por el aporte! Genial el artículo para saber que navegadores dan soporte a dichos selectores y demás!
Andrés gracias x pasarte y por el comment!
AzRi3L además de verdad nos dan muchas más opciones con las que jugar :P
Tenemos que hacer presión hablando de CSS3 para que lo saquen antes! xD
Muy buen artículo. saludos
Guay! con los selectores el código va a quedar bastante más sencillito :)
Hola nelly, saludos desde mèxico, chevere tu sitio, me ha sido de gran ayuda