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

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017

Animando cosas con CSS

Animando cosas con CSS

Muchos cosas se pueden hacer con un poco de CSS y algo de imaginación, en esta entrada veremos algunos experimentos curiosos con animaciones que pueden servir (por ejemplo) como icono para la "Carga de Página" en nuestro site.

Andrés Cruz 22-06-2015

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