¿Qué es la especificidad de CSS y cómo funciona?

Al trabajar con CSS, los estilos en conflicto pueden ser una fuente constante de problemas, especialmente cuando no sabes en dónde se encuentra el origen del conflicto. Este tutorial te brindará una firme comprensión de la especificidad de CSS, lo que te ayudará a llenar cualquier hueco en tus conocimientos para que no termines arrancándote el pelo por la frustración.

Nota: ¿tal vez eres un profesional experimentado en CSS? Este es un tema del que los desarrolladores han disfrutado hablar desde los primeros días de CSS, ¡pero siempre es divertido refrescar la memoria!

Todo lo que necesitas saber acerca de CSS

Este tutorial es parte de nuestro Aprende CSS: La guía completa: ¡échale un vistazo y guárdalo en tus marcadores!

¿Qué es la especificidad de CSS?

MDN lo explica muy bien (como siempre):

"La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados."

Esto significa que la especificidad de CSS es un conjunto de reglas usadas por los navegadores para determinar cuál de los estilos definidos por el desarrollador se aplicará a un elemento específico. Para que un estilo se aplique a un elemento en particular, el desarrollador tiene que cumplir con las reglas, de modo que el navegador sepa cómo aplicar el estilo.

Cuando dos o más estilos se enfocan en un elemento en particular, el estilo con la mayor especificidad es el que se aplica.

Comprendiendo la jerarquía de la especificidad de CSS

La especificidad de un estilo depende del lugar en el que se ubica el selector en comparación con otros selectores en conflicto. Los selectores definen la manera en la que vas a abordar el elemento que quieres estilizar en CSS. Echemos un vistazo a los selectores en la jerarquía de mayor a menor:

Estilos inline

Estos son estilos definidos en el documento HTML que están directamente vinculados al elemento que se va a estilizar. Por ejemplo:

1

<h3 style='color: red'>Hello World</h3>

Este tipo de estilos no se usa comúnmente, ya que se considera una mejor práctica el "separar intereses" y tener tus estilos en una hoja de estilo externa. Sin embargo, en la jerarquía de estilos, los estilos inline son los que se encuentran más alto.

Selectores de ID

Los selectores de ID son los siguientes en la cola. Estos son selectores dirigidos a un elemento mediante el uso del ID del mismo. Los IDs son únicos; un elemento puede tener solamente un ID, y ese ID puede ser usado solamente una vez dentro de un documento HTML.

1

<h3 id="sub-header">Hello World</h3>

Estos pueden ser invalidados por los estilos inline.

Clases, atributos y pseudo-clases

Los selectores de ID son sucedidos por los selectores de clase, selectores de atributos y selectores de pseudo-clases. Este es un ejemplo del marcado que muestra los selectores CSS correspondientes para cada uno:

1

<!-- Class Selector -->

2

<h3 class="hello-header">Hello World!</h3>

3

<!-- .hello-header { color: blue } -->

4

5

<!-- Attribute Selector -->

6

<a href="https://webdesign.tutsplus.com">Web Design Tutorial</a>

7

<!-- a[href="https://webdesign.tutsplus.com"] { color: green } -->

8

9

<!-- Pseudo Class Selector -->

10

<button>Delete</button>

11

<!-- button:hover { background-color: blue } -->

Elementos y pseudo-elementos

Los selectores de elementos te permiten estilizar el elemento seleccionado, mientras que los selectores de pseudo-elementos te permiten estilizar parte del elemento seleccionado.

1

<!-- Element selector -->

2

<p>This is an element selector</p>

3

<!-- p { color: red } -->

4

5

<!-- Pseudo-element selector -->

6

<p>This is a paragraph</p>

7

<!-- p::first-letter { color: green } -->

8

Estos selectores tienen el rango más bajo en la jerarquía de especificidad de CSS.

El uso del rango para calcular la puntuación de la especificidad de CSS.

Para calcular la especificidad de un estilo comenzaremos en 0 para cada rango. Luego podemos incrementar el rango en base a los selectores usados para abordar el elemento. Así es como se ve nuestro punto de partida:

Para los estilos inline tendremos una especificidad puntuada de esta manera:

En este caso, un estilo inline recibe una puntuación (en los términos más simples) de 1000. Un selector de ID único tendría un 1 que se agrega al cuadro debajo de ID, dándole efectivamente una puntuación de 0100. Veamos algunos ejemplos específicos para hacerlo más claro.

Reglas y ejemplos de la especificidad de CSS

Los selectores de clase invalidan a los selectores de elementos múltiples

Digamos que tenemos un fragmento de código como este en nuestro marcado HTML: un encabezado h1 anidado en dos elementos div:

1

<div>

2

  <div>

3

    <h1 class="hello-header">Hello World!</h1>

4

  </div>

5

</div>

Y en nuestro CSS tenemos los siguientes dos estilos, ambos dirigidos al mismo encabezado h1:

1

.hello-header {

2

  color: red

3

}

4

5

div > div > h1 {

6

  color: blue

7

}

¿Cuál crees que vaya a ser aplicado? en este caso tenemos un selector de clase:

contra tres selectores de elementos:

10 contra 3 puntos de especificidad. El rojo gana:

Incluso si tienes más elementos dentro de tu selector, el estilo aplicado usando clases será el elegido.

La última regla gana

Qué crees que sucede cuando te enfocas en un elemento usando exactamente los mismos selectores y haciendo uso de estilos diferentes. ¿Algo como lo que ocurre en el siguiente ejemplo?

1

<h1 class="hello-header">Hello World!</h1>

1

.hello-header {

2

  color: blue

3

}

4

5

.hello-header {

6

  color: red

7

}

Intenta adivinar.

La de más abajo (la regla de estilo procesada más recientemente) se ve como "la más cercana al elemento" y, por lo tanto, la más específica en este caso. En base a ese hecho se aplica al elemento. Esto también ocurre en todos los casos en los que los selectores empleados tienen la misma especificidad de CSS.

A continuación se muestra un ejemplo en el que nosotros hacemos uso de selectores de elementos y pseudo-elementos, esto es, selectores con la misma especificidad.

1

h1 {

2

  color: blue

3

}

4

5

h1::first-line {

6

  color: red

7

}

En este caso, el estilo aplicado al elemento es el último estilo.

Los selectores de IDs invalidan a los selectores de atributos

Si tienes un código HTML como este:

1

<h1 id="hello-header">Hello World!</h1>

con las siguientes reglas de estilo:

1

h1#hello-header {

2

  color: green

3

}

4

5

h1[id=hello-header] {

6

  color: red

7

}

Debes tener en cuenta que la primera invalidará a la última, como puedes ver a continuación.

Estos dos estilos se enfocan en el ID del elemento, pero la primera declaración lo hace usando el selector de ID (0100 puntos), mientras que la segunda lo hace a través de un selector de atributos (0010 puntos).

Los estilos inline tienen una mayor especificidad

Como hemos mencionado, las reglas definidas en el atributo de estilo del elemento en sí tienen aún más especificidad, ya que están "más cerca" del elemento que se va a estilizar. Ese tipo de estilos invalida a los estilos definidos en otros lugares.

El color púrpura en este caso está fuera de la clasificación que usaron tanto el rojo como el verde en el ejemplo anterior (1000 contra 0100 y 0010).

La regla !important

Quizá estés pensando, ¿en dónde encaja la regla !important? La palabra clave !important a menudo se usa como un último intento para ganar las guerras de la especificidad de CSS cuando todo lo demás falla. Vamos a verla en acción agregando una nueva regla al último ejemplo que aparece arriba.

Hacer que nuestras declaraciones se vean así cambia todo el juego.

1

h1#hello-header {

2

  color: green

3

}

4

5

h1[id=hello-header] {

6

  color: red

7

}

8

9

h1 {

10

  color: blue !important

11

}

Sin la regla !important, ese último estilo no tiene ninguna oportunidad de ganar, ya que (siendo un selector de elemento) ocupa el lugar más bajo.

Es importante saber que esta regla no tiene nada que ver con la especificidad, simplemente está invalidando las otras reglas y su uso se considera una mala práctica.

Selectores universales

Los selectores universales se enfocan en cualquier elemento de la página en su totalidad. Este es un ejemplo de un selector universal:

1

* {

2

  color: green;

3

}

También pueden ser usados como selectores hijos (por ejemplo: div * {}). Este tipo de selectores tiene una especificidad de 0000.

Conclusión

La próxima vez que tengas problemas con estilos en conflicto, ¡no te arranques el pelo! calma tus nervios, recuerda la jerarquía de la especificidad que comienza con los estilos inline pasando por los selectores de IDs, clases, atributos y pseudo-clases hasta los selectores de elementos y pseudo-elementos.

Y al escribir CSS recuerda que solamente debes ser tan específico como sea necesario y no más. Al ser demasiado específico con tus reglas de estilo, harás que sea más difícil contrarrestar esos estilos en ciertas situaciones.

Aprende más acerca de la especificidad de CSS

Hay montones de recursos que te resultarán útiles si planeas profundizar en la especificidad de CSS. Puedes comenzar con estos:

• 
  Desarrollo web
  Los 30 selectores de CSS que debes memorizar
  Jeffrey Way
• 
  CSS
  7 unidades de CSS que quizá no conozcas
  Jonathan Cutrell
• 
  CSS
  Explorando los pseudo-elementos de CSS
  Craig Campbell

• CSS Specificity Wars (La guerra de las especificidades de CSS) es una visualización clásica de 2005 creada por Andy Clarke
• CSS 2.1 selectors, Part 1 (Selectores de CSS 2.1, parte 1) te ayudará a comprender mejor a los selectores si aún tienes lagunas en tu comprensión del tema.
• CSS Inheritance, The Cascade And Global Scope (La herencia en CSS, el alcance de cascada y global) te enseñará sobre la herencia y la cascada.
  
• También existe Specificity Calculator (Calculadora de especificidad) que puedes emplear.
• Finalmente, también puedes leer acerca de la especificidad en CSS-Tricks y Smashing Magazine.