Calculadora de especificidad CSS
Calcula la especificidad de selectores CSS y descubre cuál tiene prioridad.
Calculadora de especificidad CSS
Pega uno o más selectores CSS, uno por línea, y esta herramienta calcula la especificidad de cada uno como la puntuación estándar de tres partes: IDs, clases (más atributos y pseudo-clases) y elementos (más pseudo-elementos). La especificidad determina qué regla aplica el navegador cuando hay conflictos, así que es útil cuando dos reglas de estilo se dirigen al mismo elemento y necesitas saber cuál gana, o cuando depuras por qué una anulación no funciona.
Activa Dividir listas separadas por comas para puntuar cada selector de una lista como ".a, .b" en su propia línea en lugar de combinarlos en uno. Ordenar por más fuerte primero reordena los resultados de especificidad más alta a más baja. Elige Tabla para un diseño de columna con IDs, clases y elementos desglosados, u notación 0-1-2 para una puntuación compacta como "1-0-2" por selector. Mostrar explicación del desglose lista qué parte de cada selector — un ID, una clase, un elemento — contribuyó a la puntuación, que es la forma más rápida de ver exactamente por qué una regla supera a otra.
La calculadora sigue la especificación CSS Selectors para los casos complicados: :where() siempre puntúa cero sin importar lo que hay dentro, mientras que :is(), :not() y :has() toman la especificidad de su argumento más específico. Un selector que contiene !important se marca, ya que anula la cascada normal sin importar la especificidad y vale la pena saber aunque no sea parte de la puntuación propia del selector. Los saltos de línea de Windows y Unix se tratan igual, y las líneas en blanco se ignoran.
Todo se ejecuta localmente en tu navegador — los selectores que pegas nunca se cargan en ningún lugar, lo que importa si verificas contra una base de código privada. Copia el resultado, descárgalo como archivo .txt, o envía la salida de vuelta a la entrada para continuar refinando tus selectores.