DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
26-03-2015

En esta entrada les mostraré los principales selectores empleados por mi persona al momento de armar una Hoja de Estilo en Cascada, de una forma u otra se han vuelto imprescindibles o esenciales en la creación de la misma.

¿Sabías que...? Con los selectores podemos ahorrar mucho trabajo y evitar así "inventar" nombres a través de clases o identificadores para referenciar o seleccionar elementos.

4+1. A[href*="github.com"]

Este selector es muy útil cuando queremos aplicar diferentes estilos según la URL que referencia el enlace; por ejemplo, si quisiéramos agregar algún detalle extra como un icono al principio del enlace:

a[href*="github.com"]:before {
  content:url("github-logo.png")
}

a[href*="google.com"]:before {
  content:url("google.png")
}

Y con un poco más de CSS podemos obtener algo como lo siguiente:

4. A > B

Este otro selector conocido como selector de hijos, es muy útil cuando queremos aplicar diferentes estilos en distintos hijos o niveles; es muy utilizado al momento de crear menús multiniveles como el siguiente:

Por ejemplo si quisiéramos aplicar un estilo solamente a las listas li dentro del ul más interno cuya característica principal es el fondo de color rojo:

ul > li > ul {
                padding:10px;
                background:#F00;
}

Ahora parte de la definición del estilo del ul más externo:

ul{
                background:#CCC;
            }

Quedando de la siguiente manera nuestro ejemplo:

3. A:visited

Volviendo con los enlaces, abras notado cada vez que visitas una página web por ejemplo en Google tienen un color diferente:

enlaces visited en CSS

Este selector permite obtener aquellos enlaces que se han visitado y cambiar el estilo; por ejemplo el color del texto:

a:visited {
color: #609;
}

A, B, C

Este selector permite ahorrar muchas líneas y redundancia de código CSS permitiendo encadenar selectores y heredar el estilo que se tenga en común:

h1, h2, h3 {
  color: #FF0000;
  font-family: Arial;
}

Para aplicar el resto de los estilos a los selectores diferentes:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

1. A:nth-child(N)

Aquí tenemos un increíble selector el cual permite seleccionar elementos por orden; por ejemplo, si tenemos el siguiente código HTML:

<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
<li>Sexto</li>
<li>Séptimo</li>
</ul>

Es muy útil cuando queremos aplicar estilos diferentes a las celdas o filas de las tablas, listas, etc; además permite emplear fórmulas como 2n+1 para obtener ciertos elementos que sigan un patrón; más información en: La pseudo-class nth-child en CSS.

ul.nth_numerica li:nth-child(1), 
ul.nth_numerica li:nth-child(3) {
    background: #999;
}

Conclusiones

En esta entrada hemos visto algunos de los muchos selectores que existen en CSS que considero de los más importantes o esenciales en orden de relevancia o importancia pero por supuesto existen muchísimos más que pueden resultar útil según el objetivo que se desea lograr.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader Battlenet

Loader Battlenet

Botón flotante

Botón flotante

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Algunos artículos que te pueden interesar

¿Cómo usar las Mixins en LESS CSS?

¿Cómo usar las Mixins en LESS CSS?

Con los Mixins podemos incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades; funciona de forma muy parecida a las variables pero con clases enteras.

Andrés Cruz 13-09-2013

Las propiedades flex-grow, flex-shrink y flex-basis

Las propiedades flex-grow, flex-shrink y flex-basis

Los flex permiten adaptarse fácilmente al espacio disponible en cualquier dispositivo; se explicará el uso de las propiedades flex-grow, flex-shrink para manejar el espacio sobrante y faltante y flex-basis para definir el tamaño base.

Andrés Cruz 20-03-2016

¿Cómo mostrar imágenes pixeladas con CSS3?

¿Cómo mostrar imágenes pixeladas con CSS3?

En esta entrada veremos comos mostrar imágenes pixeladas mediante la propiedad image-renderin en conjunto con su valor pixelated.

Andrés Cruz 20-08-2015