Selectores en CSS2 y CSS3 – pseudo-classes

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.

Eliminar el contorno de puntos en enlaces con outline de CSS

A veces cuando clicamos sobre un enlace, en algunos exploradores se queda un recuadro de puntitos alrededor de los enlaces de la pagina. Y lo curioso es que en la CSS no tiene bordes. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.

Esto lo hace la propiedad outline de css. Depende del navegador este la interpretara como none o la mostrara. Para quitarla, simplemente ponemos outline:none; en la css y problema resuelto.