Calculadora de Especificidad CSS
Calculadora de especificidad CSS en línea y gratuita. Introduce uno o dos selectores para desglosar sus pesos (a, b, c) y comparar su especificidad. El resultado no determina qué estilo se aplica en una página.
Calculadora de Especificidad CSS
Calculadora de especificidad CSS en línea y gratuita. Introduce uno o dos selectores para desglosar sus pesos (a, b, c) y comparar su especificidad. El resultado no determina qué estilo se aplica en una página.
Acerca de la especificidad CSS
Qué decide la especificidad
La especificidad es un paso de la cascada CSS. Para declaraciones sobre el mismo elemento y propiedad, tienen prioridad el origen, la importancia (!important) y la capa de cascada. Solo si estos y los demás criterios de mayor prioridad empatan se comparan los pesos (a, b, c), de izquierda a derecha. Si son iguales, aún puede compararse la proximidad del ámbito antes del orden de aparición.
Las tres columnas
La columna a cuenta selectores de ID, la columna b cuenta clases, atributos y pseudoclases, y la columna c cuenta tipos de elemento y pseudoelementos. El selector universal, los combinadores y :where() no suman. :is(), :not() y :has() aportan la especificidad de su argumento más específico. Esta herramienta colorea cada token para que veas a qué columna alimenta.
Qué abarca esta comparación
Introduce un único selector válido en cada campo. La herramienta no comprueba coincidencias con el DOM, !important en las declaraciones, estilos en línea ni capas, por lo que no determina el estilo aplicado. En una lista de selectores separados por comas, muestra el mayor peso de la lista, no el del selector que coincide con un elemento. Una entrada no válida puede mostrar (0, 0, 0); eso no confirma que sea un selector válido de especificidad cero.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Por qué no se aplica mi CSS?
La especificidad es solo una posible causa. En las herramientas de desarrollo del navegador, comprueba si el selector coincide con el elemento, la declaración es válida y se cumplen condiciones como las consultas de medios. Después revisa la cascada, incluidos !important, las capas y los estilos en línea. Esta calculadora compara pesos de selectores; no inspecciona tu página ni determina sus estilos aplicados.
¿Por qué :where() y * cuentan como cero?
:where() está diseñado para no añadir especificidad, así su contenido es fácil de anular. El selector universal * y los combinadores tampoco suman. En cambio :is() y :not() toman la especificidad de su argumento más específico.
¿Mis selectores se envían a algún servidor?
La herramienta analiza y compara los selectores localmente en tu navegador, sin enviarlos a un servidor para calcular.
¿!important y las capas cambian (a, b, c)?
No. Afectan a la prioridad en la cascada sin sumar especificidad al selector. Por eso, un (a, b, c) mayor no garantiza que gane una declaración. En las declaraciones de las hojas de estilo del autor, las declaraciones normales de capas posteriores tienen prioridad; las importantes dan prioridad a las capas anteriores. Las declaraciones normales fuera de capas tienen prioridad sobre las de capas, y las importantes invierten ese orden.