Especificidad

Andy Bell

Suponga que está trabajando con los siguientes HTML y CSS:

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

button {
  color: red;
}

.branding {
  color: blue;
}

Aquí hay dos reglas que compiten. Una coloreará el botón de rojo y el otro de azul. ¿Qué regla se aplica al elemento? Comprender el algoritmo de la especificación CSS sobre la especificidad es la clave para comprender cómo el CSS decide entre reglas en competencia.

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

Puntuación de especificidad

Cada regla de selección obtiene una puntuación. Puede pensar en la especificidad como una puntuación total y cada tipo de selector gana puntos para esa puntuación. El selector con la puntuación más alta gana.

En un proyecto real con especificidad, debe haber un balance entre el asegurarse de que las reglas de CSS que espera aplicar, realmente se apliquen, y que, en general, se mantengan las puntuaciones bajas para evitar la complejidad. El puntaje solo debe ser tan alto como sea necesario, en lugar de ser lo más alto posible. En el futuro, puede que sea necesario aplicar algunos CSS más importantes. Si busca el puntaje más alto, hará que ese trabajo sea difícil.

Puntuación de cada tipo de selector

Cada tipo de selector gana puntos. Agregue todos estos puntos para calcular la especificidad general de un selector.

Selector universal

Un selector universal (*) no tiene especificidad y obtiene 0 puntos. Esto significa que cualquier regla con 1 o más puntos lo anulará.

* {
  color: red;
}

Selector de elementos o pseudoelementos

Un selector de elemento (tipo) o pseudoelemento obtiene 1 punto de especificidad.

Selector de tipo

div {
  color: red;
}

Selector de pseudoelementos

::selection {
  color: red;
}

Selector de clase, pseudoclase o atributo

Un selector de clase, pseudoclase o atributo obtiene 10 puntos de especificidad.

Selector de clases

.my-class {
  color: red;
}

Selector de pseudoclase

:hover {
  color: red;
}

Selector de atributos

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

La pseudoclase :not() en sí misma no agrega nada al cálculo de especificidad. Sin embargo, los selectores que pasan como argumentos se agregan al cálculo de especificidad.

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

Esta muestra tendría 11 puntos de especificidad porque tiene un selector de tipo (div) y una clase dentro de :not().

Selector de ID

Un selector de ID obtiene 100 puntos de especificidad, siempre que use un selector de ID (#myID) y no un selector de atributo ([id="myID"]).

#myID {
  color: red;
}

Atributo de estilo en línea

El CSS aplicado directamente al atributo style del elemento HTML, obtiene una puntuación de especificidad de 1.000 puntos. Esto significa que para anularlo en CSS, debe escribir un selector extremadamente específico.

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

Regla !important

Por último, escribir !important al final de un valor de CSS obtiene una puntuación de especificidad de 10.000 puntos. Esta es la mayor especificidad que puede obtener un objeto individual.

Una regla !important se aplica a una propiedad CSS, por lo que todo en la regla general (selector y propiedades) no obtiene la misma puntuación de especificidad.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Check your understanding

Test your knowledge of specificity scoring

Especificidad en contexto

La especificidad de cada selector que coincide con un elemento se suma. Considere este ejemplo de HTML:

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

Este enlace tiene dos clases. Agregue el siguiente CSS y obtendrá 1 punto de especificidad:

a {
  color: red;
}

Haga referencia a una de las clases en esta regla, ahora tiene 11 puntos de especificidad:

a.my-class