# Calculadora de especificidad de selectores CSS Calcula la especificidad de selectores CSS, compara prioridades y ofrece sugerencias para evitar conflictos > Página canónica: https://elysiatools.com/es/tools/css-selector-specificity-calculator - **Categoría:** Development - **Palabras clave:** css, specificidad, selector ## Descripción general Introduce uno o varios selectores CSS y la herramienta calculara la especificidad (a, b, c), mostrara la prioridad y sugerira como reducir conflictos. ## Entradas - **Selectores** (textarea): .card .title #app .sidebar a:hover button.primary:is(:hover,:focus) ## Cuándo usarlo - Al depurar estilos que no se aplican correctamente debido a conflictos en la cascada CSS. - Durante la refactorización de hojas de estilo para reducir la complejidad y el peso de los selectores. - Al diseñar sistemas de diseño donde la predictibilidad de los estilos es crítica para la reutilización de componentes. ## Cómo funciona - Introduce uno o varios selectores CSS en el campo de texto, uno por cada línea. - La herramienta analiza cada componente del selector: IDs, clases, atributos, pseudoclases, elementos y pseudoelementos. - Se calcula la tríada de valores (a, b, c) que determina el peso jerárquico según las normas oficiales de CSS. - El sistema genera un informe comparativo que resalta qué selector tiene prioridad y ofrece sugerencias para evitar conflictos. ## Casos de uso - Resolución de conflictos de estilo en proyectos con archivos CSS de gran tamaño o heredados. - Auditoría de selectores para mejorar la mantenibilidad y evitar el uso de !important. - Formación técnica para entender cómo el navegador prioriza las reglas de CSS en el DOM. ## Preguntas frecuentes ### ¿Qué significan los tres números (a, b, c) en el resultado? Representan el peso del selector: (a) para IDs, (b) para clases, atributos y pseudoclases, y (c) para elementos y pseudoelementos. ### ¿Cómo afecta la pseudoclase :is() al cálculo? La especificidad de :is() se toma del argumento con el peso más alto dentro de su lista. ### ¿La herramienta tiene en cuenta los estilos en línea? No directamente en el selector, pero recuerda que los estilos en línea siempre tienen una prioridad superior (1,0,0,0) a cualquier selector externo. ### ¿Por qué un selector largo de elementos pierde contra una sola clase? Porque las clases (columna b) tienen un orden de magnitud de prioridad superior a los elementos (columna c), sin importar cuántos elementos haya. ### ¿Puedo comparar varios selectores simultáneamente? Sí, puedes introducir múltiples selectores para visualizar una tabla comparativa de sus niveles de especificidad. ## Herramientas relacionadas - [Sincronizador de paleta Tailwind](https://elysiatools.com/es/tools/tailwind-color-palette-sync): Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional. - [Simulador de trabajos cron](https://elysiatools.com/es/tools/cron-job-simulator): Simula una o dos expresiones cron de 5 partes, resalta solapamientos y alerta sobre programaciones densas. - [Referencia de Códigos de Estado HTTP](https://elysiatools.com/es/tools/http-status-reference): Referencia completa de códigos de estado HTTP (1xx–5xx) con semántica, escenarios típicos y consejos de reintento - [Diff visual de breakpoints responsivos](https://elysiatools.com/es/tools/responsive-breakpoint-diff): Renderiza una URL en varios anchos e inspecciona capturas, mapas de calor y metricas de diseno en la pagina. - [Generador de layout masonry CSS](https://elysiatools.com/es/tools/css-masonry-layout-generator): Genera layouts masonry puros en CSS con breakpoints, espaciado configurable y selectores omitidos - [Detector de rupturas en diff de OpenAPI](https://elysiatools.com/es/tools/openapi-diff-breach-detector): Compara schemas OpenAPI o GraphQL, marca cambios incompatibles y genera un informe de impacto para equipos de API - [Calculadora de Cashback](https://elysiatools.com/es/tools/cash-back-calculator): Calculadora de cashback: introduce categorías de gasto (nombre, gasto mensual, % de cashback) para calcular el cashback mensual y anual, la tasa efectiva y comparar con una tarjeta plana, con gráfico de proporciones. - [Calculadora de Pago de Tarjetas de Crédito](https://elysiatools.com/es/tools/credit-card-payoff): Planificador de pago de tarjetas: introduce varias tarjetas (nombre, saldo, APR, pago mínimo %) y compara avalancha (mayor APR primero) vs bola de nieve (menor saldo primero) en tiempo, intereses totales y ahorro, con curvas de saldo. ## Ejemplos - [Ejemplos de Selectores CSS](https://elysiatools.com/es/samples/css-selectors): Colección de ejemplos de selectores CSS para pruebas de extracción y análisis - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Muestras CSS](https://elysiatools.com/es/samples/css-viewer-samples): Archivos de muestra para el visor CSS en el navegador - [Ejemplos del Framework CSS Milligram](https://elysiatools.com/es/samples/milligram): Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes ## Contenido relacionado - [Creación de CSS, maquetación y flujo en cascada](https://elysiatools.com/es/hubs/css-authoring-layout-and-cascade-workflows): Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.