Selectores CSS 1 y 2

Selectores CSS 1 y 2

Selector	Descripción
*	Selector universal. Todos los elementos.
E	Cualquier elemento del tipo E (span, p, …).
E.ejemplo	Los elementos E que tengan la clase ejemplo
E#ejemplo	El elemento E con el ID "ejemplo".
E F	Los elementos F que sean descendientes de E.
E > F	Los elementos F que sean hijos de E
E + F	Cualquier elemento F que esté inmediatamente después del elemento del tipo E.<h1>...</h1> <p>...</p> → h1 + p
E:first-child	El primer elemento de tipo E (de cada "grupo").
E::first-letter	La primera letra con formato del elemento E.
E::first-line	La primera línea con formato del elemento E.
E::after	Contenido generado antes del elemento E. (h1:after{ content:" -"; })
E::before	Contenido generado después del elemento E. (h1:after{ content:" -"; })
E:link , E:visited	Son pseudo-clases. Enlaces visitados (:link) y no visitados (:visited).
E:active , E:hover , E:focus	Son pseudo-clases "activas". Seleccionan los elementos de tipo E en diferentes estados. Es importante comprobar la compatibilidad de estos selectores con versiones antiguas de IE, todavía muy utilizadas.
E:lang(c)	Es una pseudo-clase. Elementos del tipo E en el lenguaje especificado en (c). <div lang="en"> → div:lang(en)
E[foo]	Elementos del tipo E con el atributo "foo". <div align="right"> → div[align]
E[foo="ejemplo"]	Elementos del tipo E con el atributo "foo" igual a "ejemplo". <div align="right"> → div[align="right"]
E[foo~="ejemplo"]	Elementos del tipo E en los que el atributo "foo" contenga "ejemplo". <div class="uno dos"> → a[class~=dos]
E[foo|=ejemplo]	Los elemento E cuyo atributo "foo" comienze por "ejemplo". <a href="#" class="noticia-importante"> → a[class|=noticia]
E[foo$="ejemplo"]	Los elemento E cuyo atributo "foo" termine por "ejemplo". <a href="#" class="ultima-noticia"> → a[class$=noticia]