Hoy dejo un pequeño repaso de los selectores, pseudo-class y pseudo-elements para CSS2 y CSS3. Lo hago porque ultimamente he utilizado los clasicos :last-child y :first-child, pero buscando he encontrado otros también muy interesantes, sobre todo el :after y el :before.
CSS2:
* Selector niversal, son todos los elementos del CSS
E E representa cualquier elemento del tipo E (span, p, …)
E F Todos los elementos F que sean descendentes de E
E > F Todos los elementos F que sean hijos de E
E:first-child De esta forma podemos seleccionar el primer elemento de tipo E
E:last-child De esta forma podemos seleccionar el ultimo elemento de tipo E
E:link , E:visited Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited)
E:active , E:hover , E:focus Selecciona los elementos de tipo E , en sus correspondientes acciones.
E:lang(c) Cogemos los elementos del tipo E que estén en el idioma (humano) especificado en (c).
E + F Se trata de cualquier elemento F inmediatamente despues del elemento del tipo E
E[foo] Elementos del tipo E con el atributo foo
E[foo=”ejemplo”] Elementos del tipo E con el atributo foo igual a “ejemplo”
E[foo~=”ejemplo”] Elementos del tipo E con el atributo foo contenga “ejemplo”. Se pueden añadir varias palabras separadas por espacios. ( ~ =ALT + 0126)
E[lang|=”es”] Similar al anterior, pero se referirá a todos los elemento E tal que su atributo lang comienze por “es”. Por ejemplo: “es_ES”, “es_CA”,…
E[foo$=”ejemplo”] Elementos del tipo E en el que el atributo foo termine con “ejemplo”.
DIV.ejemplo Todos los elementos DIV que sean de la clase ejemplo
E#miID El elemento E en el que su ID sea igual miID
:first-line Se refiere a la primera línea del elemento, normalmente usado para para elemetos de texto.
:first-letter La primera letra del elemento, tambien suele usarse para elementos de texto.
:before Elemento usado para insertar algún contenido delante de un elemento.
:after Elemento usado para insertar algún contenido al final del elemento.
CSS3:
:nth-child(N) Se utiliza para tablas normalmente. N puede ser 5, 2n+1, 3n+3 …
ul li:nth-child(5) {
color: #ccc;
}
ul li:nth-child(5) {
color: #ccc;
}
tr:nth-child(2n+2) {background: #eee}Conforme vaya encontrado más (que los hay), iré publicando más post.