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.
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…
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