Cómo calcular la especificidad de un selector CSS

Qué calcula la herramienta

La especificidad CSS permite comparar la prioridad relativa de varios selectores cuando varias reglas pueden aplicarse al mismo elemento. Esta herramienta desglosa el selector introducido en cuatro componentes y calcula una puntuación numérica, por lo que resulta útil para revisar una regla antes de ajustar el orden o la estructura de una hoja de estilos.

Puedes usarla con un selector escrito en el campo de entrada. El campo es opcional: si lo dejas vacío, la herramienta devuelve componentes con valor cero, una puntuación de cero y una representación vacía del selector. Con texto no vacío, conserva la representación del selector enviado en el resultado.

Pasos para calcular la especificidad

1. Escribe en el campo de entrada el selector CSS que quieres revisar, por ejemplo #cabecera, .boton o un selector combinado. Introduce el texto tal como aparece en tu hoja de estilos para que el resultado conserve esa referencia.

2. Ejecuta el cálculo con el control disponible en la herramienta. No necesitas preparar una lista separada de selectores: analiza el texto que hayas introducido en ese momento.

3. Lee los cuatro componentes del resultado. Los identificadores contribuyen al primer componente. Las clases, los selectores de atributo y las pseudoclases contribuyen al segundo cuando coinciden con las reglas de detección de la herramienta.

4. Revisa el tercer componente para los pseudoelementos y los selectores de elemento o de tipo que la herramienta detecte. El selector universal no aumenta el recuento.

5. Consulta la puntuación numérica como una forma resumida de comparar el resultado. El cálculo pondera los cuatro componentes con los valores 1000, 100, 10 y 1, respectivamente. Una cifra mayor refleja una combinación ponderada mayor dentro de este cálculo; no sustituye la revisión del contexto en el que se aplican las reglas.

6. Si quieres comprobar otra regla, sustituye el texto y vuelve a ejecutar el cálculo. Para revisar el comportamiento del campo sin un selector, utiliza una entrada vacía o formada solo por espacios y observa el resultado de cero.

Cómo interpretar el resultado

El resultado debe leerse como una descomposición del texto introducido: cada componente recoge las coincidencias que la herramienta reconoce y la puntuación resume esas cantidades mediante sus ponderaciones. Un identificador suele tener un peso superior al de una clase, un atributo o una pseudoclase dentro de este modelo, mientras que los selectores de elemento o de tipo y los pseudoelementos se reflejan en un componente posterior.

Una entrada válida puede producir un resultado satisfactorio para selectores de identificador, de clase y combinados. Por ejemplo, al analizar #cabecera, espera una estructura con cuatro componentes [1, 0, 0, 0], una puntuación numérica calculada con esas ponderaciones y la representación #cabecera. La puntuación correspondiente se obtiene aplicando 1000, 100, 10 y 1 a las posiciones respectivas.

Usa la comparación para localizar por qué una regla queda por delante de otra, pero comprueba también el contexto real de la hoja de estilos. El recuento depende de los patrones que la herramienta detecta para cada clase de selector. Por eso, una sintaxis que no encaje en esas reglas puede no quedar reflejada como esperas. El resultado es una ayuda de revisión del texto introducido, no un análisis exhaustivo de cada posibilidad de la sintaxis CSS.

Ejemplo práctico

Estás revisando una regla aplicada al encabezado principal y quieres comprobar la contribución de su identificador.

Introduce #cabecera en el campo de entrada y ejecuta el cálculo.

El resultado contiene cuatro componentes [1, 0, 0, 0], una puntuación numérica calculada con las ponderaciones indicadas y la representación #cabecera.

Limitaciones

• El resultado depende de los patrones de reconocimiento de la herramienta para identificadores, clases, atributos, pseudoclases, pseudoelementos y selectores de tipo. Una sintaxis que no coincida con esos patrones puede no reflejarse como esperas.

Errores frecuentes

• Introducir solo espacios y esperar un recuento del selector provoca un resultado vacío con cuatro componentes a cero. Escribe el selector sin espacios aislados y ejecuta de nuevo el cálculo.

Preguntas frecuentes

¿Qué ocurre si no introduzco ningún selector?

Sí, puedes dejar el campo vacío. Una entrada vacía o formada solo por espacios devuelve cuatro componentes a cero, una puntuación de cero y una representación vacía.

¿La herramienta conserva el selector que he escrito?

El resultado conserva el texto enviado cuando la entrada no está vacía. Esto facilita relacionar los componentes y la puntuación con la regla que estabas revisando.

¿Se cuenta el selector universal como parte de la especificidad?

El selector universal no aumenta el recuento. Las clases, los atributos y las pseudoclases se asignan al segundo componente cuando la herramienta los detecta según sus reglas de reconocimiento.