Selectores avanzados de CSS

Normalmente nos vamos a lo más fácil cuando escribimos el código de una hoja de estilos CSS, pero hay infinidad de trucos y técnicas para mejorar el rendimiento de los estilos de nuestras páginas web, ya sea por medio de los tan de moda frameworks, como LESS y SASS, o por medio de módulos CSS3 como @media para responsive design. También podemos mejorar nuestras hojas de estilos mediante selectores avanzados, normalmente estos selectores no se utilizan por ser demasiado complejos de recordar o por falta de conocimiento.

Hoy vamos a ver unos códigos que tal vez resúlten útiles.

* {
}

El primero no tiene mucho misterio, aplica los estilos a todos los elementos o etiquetas en las que se aplica, se usa para resetear preformatos de los navegadores.

a[href*="soyautodidacta"] {
}

Se aplicará el estilo a todos los enlaces que contengan la palabra «soyautodidacta» en su href, si quitamos el * tendremos que poner la URL exacta que deseemos.

header + div {
}

Aplica el estilo al primer contenedor (div) que aparezca después de la etiqueta header, esto nos serviría para aplicar un estilo al primer div de la página.

ul li:first-child {  
}

Aplicamos estilo al primer elemento de la lista desordenada.

ul li:last-child {  
}

En este caso será al último elemento de la lista.

ul li:nth-child(2) {
}

Ahora lo que haremos será indicar la posición exacta de la lista que recibirá el estilo.

img:not(#footer) {
}

Daremos estilo a todas las imágenes que NO tengamos dentro del #footer

table tr:nth-of-type(2) {
}

Del caso de las listas desordenadas tenemos una variación, que usaremos para otros elementos como los párrafos, ya que con este estilo vamos a dar unas propiedades a cada segunda fila que contenga cada tabla.