Publicado por: 0

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.