Especificidad y herencia CSS

Como se mencionó en las guías anteriores, CSS significa Cascading Style Sheet que, traducido, significa Hoja de estilo en cascada.
Este concepto debe quedarte especialmente claro, ya que es un requisito previo para aprender de lo que hablaremos en esta guía.

La característica principal de una hoja de estilo es el orden en que los selectores asignan las reglas css a un elemento html determinado.

Esto significa que si se asignan dos propiedades idénticas a un elemento, mediante dos selectores con el mismo "poder", pero con valores diferentes, se interpretará el último valor ingresado.

Pongamos inmediatamente un ejemplo para que quede más claro lo que se acaba de decir:

p {
    color : green;
}

p {
    color : red;
}

Como puedes ver, en este caso, en nuestra hoja CSS tendremos dos selectores que seleccionan todas las etiquetas <p> de la página HTML. ¿Lo que sucederá? Simple: todas las etiquetas p se colorearán de rojo, ya que la segunda regla anulará la primera.

Lo mismo sucedería si las dos propiedades estuvieran asignadas en la misma regla: 

p {

   color : green;

   color : red;

}

Más allá de esta regla básica, sin embargo, hay algo más que establece la precedencia de una regla sobre otra en nuestra hoja de estilo: estamos hablando de la especificidad de los selectores, que analizaremos en breve, introduciendo otro pequeño concepto útil para el propósito, es decir, el de la herencia.

Herencia

Otra característica importante de CSS es la herencia de propiedades.

Intentemos concebir nuestra página html como una especie de árbol genealógico: cada elemento, por lo tanto, tiene un padre del que puede heredar una determinada propiedad.

Aquí un pequeño ejemplo.
La struttura html:

<header>

  <h1>Conviertete en desarrollador web</h1>

  <h2>CURSO DE CODING</h2>

  <a href=”https://aulab.it/calendly">Reserva una cita</a>

</header>

Código CSS:

header {

   color : #333333;

   font-size : 24px;

}

En el ejemplo anterior, las etiquetas <h1>, <h2> y <a> tendrán un tamaño de 24 px, mientras que solo las etiquetas <h1> y <h2> cambiarán de color.
Esto se debe a que estas etiquetas heredarán el color y el tamaño de sus padres.
Entonces, ¿por qué la etiqueta de anclaje no cambia de color?

Porque la etiqueta ancla, así como otras etiquetas dentro del navegador (como <button> o <input>), tiene un estilo predeterminado que nunca se sobrescribirá con uno heredado.
Para anular el estilo necesitaremos asignarle uno con reglas expresadas a través de un selector que tendrá una acción más fuerte que la herencia: un selector más específico.

Especificidad

¿Cuál es, entonces, la famosa especificidad?
La especificidad es el valor que le permite definir la prioridad de una regla CSS sobre otra.

En los ejemplos vistos hasta ahora, es fácil calcular el tamaño del texto o determinar el color de un párrafo, porque deliberadamente hemos reportado ejemplos muy simples para comprender mejor el concepto básico.
En realidad, sin embargo, la situación comienza a ser bastante diferente cuando las hojas de estilo comienzan a ser bastante grandes y la determinación de la especificidad de las reglas CSS puede volverse muy complicada.

Por ejemplo, podemos encontrarnos en una situación en la que las reglas se superponen y no conseguimos cambiar algunas propiedades. Para superar este problema, el lenguaje CSS proporciona una forma muy sencilla de determinar qué propiedad tendrá prioridad.

La propiedad con el valor de especificidad más alto tendrá prioridad sobre otras propiedades; si dos o más reglas tienen el mismo valor de especificidad, la asignación seguirá el principio de cascada.

El valor de especificidad de una regla CSS se puede representar mediante un número de cuatro dígitos. En este sistema numérico, la importancia de los números se ordena de izquierda a derecha, por lo que los valores más altos indican una mayor especificidad.
Para cada tipo de selector tendremos un valor de especificidad diferente.

Imaginemos nuestros 4 dígitos:

|0|0|0|0| 

• Los elementos y pseudoelementos sumarán 1 al dígito 4-> |0|0|0|1|
• Las clases, los atributos y las pseudoclases sumarán 1 al dígito 3 -> |0|0|1|0|
• Los ID agregarán 1 al dígito 2 -> |0|1|0|0|
• El estilo en línea agregará 1 al dígito 1-> |1|0|0|0|

Veámos algunos ejemplos:

p {}                /*  0|0|0|1 */

p span {}             /*  0|0|0|2 */

p.text-red {}        /* 0|0|1|1 */

p.text-red#subtitle {} /* 0|1|1|1 */

#menu {}             /* 0|1|0|0 */

style="color:red;"    /* 1|0|0|0 */

El último ejemplo, que utiliza el atributo de estilo, tiene prioridad sobre todos los demás ejemplos.
¡Pero recuerda! El estilo en línea no siempre se recomienda.

Finalmente, hay una última palabra clave CSS que anula todas las anteriores, es decir, !important

Al escribir esta palabra clave al final de una propiedad CSS, tendrás prioridad sobre todas las declaradas, incluso si existen selectores con mayor especificidad.

Hagamos un ejemplo:

/*en HTML*/

<p style=”color: red;”>Hola a todos</p>

/*en CSS*/

p {

   color : green !important;
}

De esta forma, incluso si el selector para el elemento p tiene una especificidad menor que el estilo en línea, ¡gracias a la palabra clave! Importante, la etiqueta <p> tendrá un color verde.

Sin embargo, te recomendamos que uses esta palabra clave con moderación porque, a la larga, en un proyecto muy grande podría causarte numerosos problemas y anular muchas clases, lo que dificultaría el cambio de estilo de algunos elementos.