Selectores avanzados de CSS

style cssNormalmente 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.

¿Te ha gustado? Compártelo y Comenta! Puedes darme tu opinión o consultar tus dudas, de esta forma mantendremos la blogosfera viva.

    2 Commentsto Selectores avanzados de CSS

    1. Información Bitacoras.com

      Valora en Bitacoras.com: 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…

    2. Oswal-vl dice:

      Estimado Jorge, felicitaciones por tu página y gracias por los consejos que publicas.

      Por favor, me puedes indicar cómo hacer que una página html, enlazada a una carpeta en el disco duro, pueda ver el contenido de dicha carpeta (documentos pdf) y publique automáticamente un listado (de ese contenido) en la pantalla.

      Si yo añado o quito manualmente algún pdf en esa carpeta, que ese evento lo pueda visualizar también en la pantalla.

      Agradezco de antemano cualquier ayuda que me puedas brindar.

      Saludos cordiales.

      Oswal

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *

    © 2017 Soy Autodidacta | Design Theme by: D5 Creation | Powered by: WordPress