Especificidad

El podcast del CSS: 003: Especificidad

Supongamos que estás trabajando con el siguiente código HTML y CSS:

<button class="branding">Hello, Specificity!</button>

.branding {
  color: blue;
}

button {
  color: red;
}

Aquí hay dos reglas que segmentan el mismo elemento. Cada regla contiene una declaración que intenta establecer el color del botón: una intenta colorear el botón de rojo y la otra de azul. ¿Qué declaración se aplica al elemento?

Comprender el algoritmo de especificidad de CSS es clave para entender cómo CSS decide entre declaraciones en conflicto.

La especificidad es una de las etapas distintas de la cascada, que se abordó en el último módulo, sobre la cascada.

Puntuación de especificidad

Cada regla de selector dentro de un origen obtiene una puntuación. Puedes pensar en la especificidad como una puntuación total, y cada tipo de selector obtiene puntos para esa puntuación. Las declaraciones de reglas con la especificidad más alta ganan.

Con la especificidad en un proyecto real, el acto de equilibrio es asegurarse de que las reglas de CSS que esperas que se apliquen, se apliquen realmente, mientras que, en general, se mantienen las puntuaciones bajas para evitar la complejidad. La especificidad solo debe ser tan alta como la necesitemos, en lugar de intentar obtener la especificidad más alta posible. En el futuro, es posible que se deba aplicar un CSS más importante. Si buscas la especificidad más alta, harás que ese trabajo sea difícil.

La especificidad no es un número decimal, sino una tríada que consta de tres componentes: A, B y C.

• A: Especificidad similar a un ID
• B: Especificidad similar a una clase
• C: Especificidad similar a un elemento

A menudo, se representa con la notación (A,B,C). Por ejemplo: (1,0,2). También se usa comúnmente la notación alternativa A-B-C.

Cómo comparar especificidades

Las especificidades se comparan comparando los tres componentes en orden: la especificidad con un valor A más grande es más específica; si los dos valores A están empatados, la especificidad con un valor B más grande es más específica; si los dos valores B también están empatados, la especificidad con un valor C más grande es más específica; si todos los valores están empatados, las dos especificidades son iguales.

Por ejemplo, (1,0,0) se considera una especificidad más alta que (0,4,3) porque el valor A en (1,0,0) (que es 1) es mayor que el valor A de (0,4,3) (que es 0).

Los selectores influyen en la especificidad

Cada parte de la tríada de especificidad comienza con un valor de 0, por lo que la especificidad predeterminada es (0,0,0). Cada parte de un selector aumenta la especificidad que, según el tipo de selector, incrementa el valor de A, B o C.

Selector universal

Un selector universal (*) **no agrega especificidad**, lo que deja su valor en la especificidad inicial de (0,0,0).

* {
  color: red;
}

Selector de elementos o pseudo-elementos

Un selector de elementos (tipo) o pseudo-elementos agrega especificidad similar a un elemento , que incrementa el componente C en 1.

Los siguientes ejemplos tienen una especificidad general de (0,0,1).

Selector de tipo

div {
  color: red;
}

Selector de pseudo-elementos

::selection {
  color: red;
}

Selector de clase, pseudo-clase o atributo

Un selector de clase, pseudo-clase o atributo agrega especificidad similar a una clase que incrementa el componente B en 1.

Los siguientes ejemplos tienen una especificidad de (0,1,0).

Selector de clase

.my-class {
  color: red;
}

Selector de pseudo-clase

:hover {
  color: red;
}

Selector de atributos

[href='#'] {
  color: red;
}

Selector de ID

Un selector de ID agrega especificidad similar a un ID que incrementa el componente A en 1, siempre que uses un selector de ID (#myID) y no un selector de atributos ([id="myID"]).

En el siguiente ejemplo, la especificidad es (1,0,0).

#myID {
  color: red;
}

Otros selectores

CSS tiene muchos selectores. No todos agregan especificidad. Por ejemplo, la :not() pseudo-clase en sí no agrega nada al cálculo de especificidad.

La especificidad de la pseudo-clase :not() se reemplaza por la especificidad del selector más específico en su argumento de selectores separados por comas, lo que proporciona la misma especificidad que si se hubiera escrito :not(:is(argument)).

div:not(.my-class) {
  color: red;
}

La pseudo-clase :is() tampoco se agrega al cálculo de especificidad. Al igual que :not(), toma la especificidad de su argumento más específico.

:is(h1, h2, h3) {
  color: blue;
}

Esta muestra tiene una especificidad de (0,0,1) porque solo tiene un tipo de selector (type).

Con la adición de un id, la especificidad aumenta a (1,0,0).

:is(h1, h2, h3, #my-heading) {
  color: blue;
}

La :where() pseudo-clase es diferente. Sin importar la especificidad de cualquiera de sus argumentos, siempre tiene una especificidad de (0,0,0).

:where(h1, h2, h3, #my-heading) {
  color: blue;
}

Los estilos de baja especificidad aplicados con :where() te permiten anular estos estilos con selectores básicos más adelante en tu hoja de estilo:

:where(#my-content) {
   color: red;
}

p {
   color: blue;
}

Aunque :where() tiene un id en su lista de argumentos, solo tiene una especificidad de (0, 0, 0), por lo que el selector p básico lo anula y el texto será blue.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la puntuación de especificidad

<div style="color: red"></div>

.my-class {
  color: red !important;
  color: white;
}

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

<a class="my-class another-class" href="#">A link</a>

a {
  color: red;
}

a.my-class {
  color: green;
}

a.my-class.another-class {
  color: rebeccapurple;
}

a.my-class.another-class[href] {
  color: goldenrod;
}

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

<button class="my-button" onclick="alert('hello')">Click me</button>

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}