Calcula la especificidad de selectores CSS al instante. Comprende el peso, puntos de prioridad y resuelve conflictos de estilos. Introduce cualquier selector CSS para ver su valor en formato (a,b,c). Gratis y del lado del cliente.
La Calculadora de Especificidad CSS ayuda a los desarrolladores a comprender y comparar el peso de los selectores CSS. La especificidad CSS determina qué estilos se aplican cuando múltiples reglas apuntan al mismo elemento. La calculadora descompone cualquier selector en sus partes componentes — estilos en línea, IDs, clases/atributos/pseudo-clases y elementos/pseudo-elementos — y calcula el valor de especificidad (a,b,c). Entender la especificidad es esencial para depurar conflictos CSS y escribir hojas de estilo mantenibles.
La especificidad CSS es el algoritmo que los navegadores usan para decidir qué valores de propiedades CSS se aplican a un elemento cuando múltiples reglas podrían aplicar. Se calcula como una tupla de tres valores (a, b, c): a = número de selectores de ID, b = número de selectores de clase + selectores de atributo + pseudo-clases, c = número de selectores de elemento + pseudo-elementos.
La especificidad se calcula contando el número de cada tipo de selector en la cadena: (a) selectores de ID (#id), (b) selectores de clase (.class), selectores de atributo ([attr]) y pseudo-clases (:hover), y (c) selectores de elemento (div) y pseudo-elementos (::before). La declaración !important anula la especificidad por completo.
Un selector de ID (#id) siempre supera cualquier número de selectores de clase porque la especificidad no es un número en base 10 — es una tupla. (1, 0, 0) siempre es mayor que (0, 100, 0). Ninguna cantidad de clases puede vencer a un solo ID.
No, el selector universal (*) tiene cero especificidad y no contribuye al cálculo de especificidad.