Calculadora de especificidad CSS
Calcule y compare puntuaciones de especificidad de selectores CSS
Entrada y opciones
Ajustes rápidos y ejemplos
Se ejecuta en su navegador. Sus datos permanecen en este dispositivo.
Resultados
Ingrese sus valores para ver el resultado.
Acerca de la calculadora de especificidad CSS gratuita
La calculadora de especificidad CSS es una herramienta gratuita que ayuda a los desarrolladores web a entender, calcular y depurar la especificidad de los selectores CSS. La especificidad es el algoritmo que usan los navegadores para determinar qué regla CSS tiene prioridad cuando varias reglas apuntan al mismo elemento. Se expresa como un valor de tres partes (a, b, c), donde cada componente representa una categoría distinta de peso del selector.
Comprender la especificidad CSS es una de las habilidades más importantes para los desarrolladores front-end. Cuando los estilos no se aplican como se espera, los conflictos de especificidad suelen ser la causa de fondo. Esta calculadora desglosa al instante cualquier selector CSS en sus componentes de especificidad y le muestra exactamente cuántos selectores de ID (a), selectores de clase/atributo/pseudoclase (b) y selectores de elemento/pseudoelemento (c) contribuyen a la puntuación final.
La herramienta incluye un potente modo de comparación que le permite colocar dos selectores lado a lado para ver cuál gana en un enfrentamiento de especificidad. Es muy útil al depurar conflictos de CSS, refactorizar hojas de estilo o aprender cómo funciona la cascada. Los gráficos de barras y los desgloses con código de colores hacen que la especificidad sea intuitiva y fácil de entender, incluso para quienes se inician en CSS.
Características principales
- Cálculo instantáneo de especificidad para cualquier selector CSS válido
- Gráfico de barras que muestra el peso relativo de los IDs, las clases y los elementos
- Desglose con código de colores de cada componente del selector (IDs en rojo, clases en amarillo, elementos en azul)
- Modo de comparación para enfrentar dos selectores con indicadores de ganador/perdedor
- Compatibilidad con selectores complejos, incluidas pseudoclases, pseudoelementos y selectores de atributo
- Manejo correcto de las reglas de especificidad de las pseudoclases :not(), :is() y :where()
- 14 ejemplos predefinidos que cubren patrones de selectores comunes para aprender rápido
- Copia de los valores de especificidad al portapapeles con un clic
- Tarjeta de referencia rápida integrada con las reglas de especificidad
- Compatibilidad con modo oscuro para usarlo cómodamente en cualquier entorno
Cómo usar la calculadora de especificidad CSS
- Ingrese un selector CSS: Escriba o pegue cualquier selector CSS en el campo de entrada. La especificidad se calcula al instante mientras escribe.
- Revise el desglose: Examine el valor de especificidad (a, b, c), el gráfico de barras y el desglose por componentes con código de colores para entender cómo se determina la puntuación.
- Pruebe el modo de comparación: Cambie al modo de comparación para ingresar dos selectores y ver cuál tiene mayor especificidad, con indicadores claros de ganador, perdedor o empate.
- Use los ejemplos predefinidos: Haga clic en cualquiera de los 14 selectores predefinidos para ver su especificidad al instante. En el modo de comparación, los ejemplos rellenan el primer campo de selector vacío.
- Copie el resultado: Haga clic en el botón de copiar junto al valor de especificidad para copiarlo al portapapeles y usarlo en documentación o comentarios de código.
Casos de uso
- Depuración de conflictos CSS: Determine por qué una regla CSS anula a otra comparando sus puntuaciones de especificidad e identificando el selector ganador.
- Refactorización de hojas de estilo: Analice la especificidad de los selectores en todo su código para reducir los selectores demasiado específicos y mejorar el mantenimiento del CSS.
- Aprendizaje de la cascada CSS: Use los desgloses visuales y los ejemplos predefinidos para desarrollar una comprensión intuitiva de cómo funciona la especificidad en la práctica.
- Revisión de código: Verifique rápidamente la especificidad de los selectores durante las revisiones de código para evitar guerras de especificidad y mantener enfoques de estilo coherentes.
- Enseñanza y talleres: Use el modo de comparación y los gráficos visuales como apoyo didáctico en talleres de CSS, bootcamps y cursos en línea.
- Planificación de la arquitectura CSS: Planifique estrategias de selectores (BEM, OOCSS, utility-first) entendiendo las implicaciones de la especificidad antes de escribir código.
- Personalización de frameworks: Calcule la especificidad al sobrescribir estilos de Bootstrap, Tailwind u otros frameworks para asegurarse de que sus reglas personalizadas tengan prioridad.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, la calculadora de especificidad CSS es totalmente gratuita. No hay límites de uso, no se necesita cuenta y no hay planes premium. Calcule y compare todos los selectores que necesite.
¿Mis datos están seguros?
Por supuesto. Todos los cálculos de especificidad se realizan por completo en su navegador. Ningún selector CSS ni dato se envía a ningún servidor. La herramienta funciona totalmente sin conexión una vez cargada.
¿Cómo funciona la especificidad CSS?
La especificidad CSS se calcula como un valor de tres partes (a, b, c). La columna "a" cuenta los selectores de ID (#id), la columna "b" cuenta los selectores de clase (.class), los selectores de atributo ([attr]) y las pseudoclases (:hover), y la columna "c" cuenta los selectores de tipo (div, p) y los pseudoelementos (::before). Los valores más altos en las columnas anteriores siempre ganan, sin importar las columnas posteriores.
¿Qué ocurre con !important y los estilos en línea?
Los estilos en línea anulan toda la especificidad basada en selectores, y !important anula todo, incluidos los estilos en línea. Se manejan fuera del sistema de especificidad (a, b, c) y esta herramienta no los calcula, ya que no forman parte de la especificidad de los selectores.
¿Cómo afecta :not() a la especificidad?
La pseudoclase :not() en sí no aporta especificidad, pero su argumento se cuenta con normalidad. Por ejemplo, :not(.active) suma (0, 1, 0) porque .active es un selector de clase. De forma similar, :is() toma la especificidad de su argumento más específico, mientras que :where() siempre aporta especificidad cero.
¿Qué ocurre cuando dos selectores tienen la misma especificidad?
Cuando dos selectores tienen valores de especificidad idénticos, se aplica la regla de la cascada de CSS: tiene prioridad el selector que aparece más tarde en el código fuente. El modo de comparación mostrará en ese caso un indicador "EMPATE".
Consejos y buenas prácticas
- Mantenga la especificidad baja: Prefiera los selectores de clase a los de ID para que la especificidad sea manejable y los estilos sean más fáciles de anular cuando haga falta.
- Evite !important: Usar !important es señal de problemas de especificidad. Corrija la causa de fondo ajustando la especificidad de los selectores en lugar de añadir declaraciones !important.
- Use BEM o una nomenclatura similar: Metodologías como BEM (Block Element Modifier) ayudan a mantener una especificidad plana al basarse principalmente en selectores de una sola clase.
- Verifique antes de anidar: Los selectores muy anidados como #main .content .sidebar .widget p acumulan una especificidad alta. Use esta calculadora para comprobarlo antes de confirmar los cambios.
- Aproveche :where() para especificidad cero: Al escribir estilos de utilidad o reinicios, envuelva los selectores en :where() para que puedan anularse fácilmente.
- Compare durante la depuración: Cuando un estilo no se aplica, use el modo de comparación para comprobar si otro selector está ganando el enfrentamiento de especificidad.