aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hoy tengo ganas de escribir, así que aprovecho y vamos a intentar explicar como usar los selectores CSS y las formas más correctas de hacer uso de ellos para los usuarios más noveles.

¿Que es un selector CSS?

Llamamos selector CSS al conjunto de reglas que en nuestro CSS nos permite dar estilos a un elemento u otro de nuestro HTML.

Para entender mejor esta última línea vamos al código, el lenguaje universal 😀

//HTML
<p class="rojo">Texto en rojo</p>
<p>Texto normal</p>
<p class="rojo">Texto rojo y <span class="azul">azul</span></p>
<p class="azul">Texto azul y <span class="rojo">rojo</span></p>

Este código HTML nos muestra 3 parrafos de los que podemos ver a simple vista que 2 de ellos son de la clase «rojo«, si decidimos que esta clase nos muestre el texto en rojo, debemos especificar en nuestro CSS que la clase «rojo» mostrará el texto de su interior en rojo.

.rojo {
	color:red;
}

Este código, podrá hacer que el texto que se encuentre en el interior de nuestro parrafos con class «rojo «se vean en color rojo. El problema radica en que esto se aplica a todos los elementos con class «rojo«, ya sean <p /> como <span />. Nosotros únicamente queremos que nuestro los parrafos (<p />😉 se vean afectados por este color.

p.rojo {
	color:red;
}

De esta forma, estamos indicando que los elementos <p /> con class «rojo» se verán en rojo. Y los demás elementos quedan libres de esta regla.

Un caso algo más complejo

Veamos un caso más complejo para hacer una idea, iremos paso a paso para ir dandolé estilos a un menú fictício.

//HTML
<ul class="menu">
	<li class="home"><a href="..">Home</a></li>
	<li class="option1"><a href="..">Opt1</a></li>
	<li class="option2 active"><a href="..">Opt2</a></li>
	<li class="option3"><a href="..">Opt3</a></li>
	<li class="logout"><a href="..">Salir</a></li>
</ul>

Vemos la estructura HTML y se trata de un listado de opciones con enlaces en su interior que nos llevarán a las diferentes opciones disponibles en nuestro menú.

Empecemos a estilizar nuestro menú (perdonarme los colores y el diseño en general…. soy horrible 🙁 ):

/* ESTILOS DEL MENU */
ul.menu {
   background-color: #FFEFEF;
   padding:2em;
}

Primero definimos unos estilos básicos para nuestro elemento <ul />, estos estilos darán un color y un poco de espaciado a nuestro menu.

/* ESTILOS GLOBALES DE LOS ELEMENTOS */
ul.menu li {
   display:inline;
   margin-left:1em;
}

Ahora vamos a mejorar el aspecto de los elementos del menú, para ello vamos a dibujarlos «inline» para poder verlos en horizontal y para que no estén pegados uno a otro los vamos a separar 1em entre si.

ul.menu li a {
   border-top:1px #EAB7B7 solid;
   border-bottom:1px #EAB7B7 solid;
   padding:1em;
   color: #BF6B6B;
}

Los enlaces no se van a librar y como son elementos de interacción directa con el usuario van a tener un poco más de atención. En este caso, ponemos unas líneas de bordes superior e inferior además de espaciarlo y cambiar el color de la fuente del texto que haya en su interior.

Como vamos viendo vamos descendiendo por el arbol de elementos y vamos dándole estilos a cada uno de ellos.

/* ESTILOS PERSONALIZADOS ACTIVE */
ul.menu li.active a {
background-color:#EAB7B7;
}

Empezamos a personalizar los elementos que nos encontramos en el menú. En este caso, indicamos que el elemento con clase «active» tendrá un background más oscuro al resto, esto nos resaltará el elemento activo y para ello debemos profundizar en nuestro arbol de elementos.

Si intentamos descifrar la siguiente línea:

ul.menu li.active a

leemos lo siguiente:

A los elements A que nos encontremos en los elementos LI con class «active» de nuestro elemento UL con class «menu» le aplicas los estilos …

Siguiendo está lógica seguimos personalizando nuestro menú.

/* PERSONALIZACION DE ELEMENTOS*/
ul.menu li.home a{
border:2px #fff solid;
color:#999;
}

ul.menu li.logout a{
border:2px #000 solid;
color:#000;
}

Marcamos diferencias entre los elementos con class «home» y «logout«.

El resultado

Como vemos en la imagen, nuestro estilo se ha aplicado como esperabamos.

Especificidad en CSS

Todo esto, nos lleva a la especificidad CSS, algo que hace ya un par de años desde EstadoBeta nos explicaban y que actualmente está cogiendo más importancia.

Hace unos días en CSS-Tricks, comentaban sobre el tema y nos mostraban esta imagen:

En ella podemos ver los valores que se les dá a las formas de acceder a un elemento, mientras más especifidad mejor para que nuestro CSS sea más consistente.

Como podemos ver en las imagenes una especificidad mayor nos ayuda a marcar la importancia que tiene un selector frente a los demás.

* Imagenes de css-tricks.com

Más información

1. CSS Specificity
2. CSS Specificity  | Smashin Magazine
3. Calculando la especificidad en CSS |Estado Beta