4+1 selectores CSS esenciales al momento de programar

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:

GitHub 

Google 

Ver ejemplo Descargar

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:

• Inicio
• Nuevo
  • Inicio
  • Nuevo
  • Sobre nosotros
• Sobre nosotros

Ver ejemplo

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:

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.