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](/public/images/example/css/css-visited-google.png)
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.
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter