Calculadora de especificidad CSS
Pega uno o más selectores CSS para ver su especificidad como (IDs, clases, tipos), un desglose por colores de cada parte y una clasificación que muestra qué regla gana. Sigue las reglas de Selectors Level 4.
Última actualización:
Cómo usar Calculadora de especificidad CSS
- Escribe o pega selectores en el cuadro, uno por línea. Una lista separada por comas se divide en selectores independientes.
- Lee la puntuación de cada selector como (a, b, c): IDs, luego clases, atributos y pseudoclases, y luego elementos y pseudoelementos.
- Revisa la clasificación: el selector de arriba gana cuando las reglas apuntan al mismo elemento; las puntuaciones iguales se marcan como empates.
- Haz clic en un selector para ver el desglose de cada parte y por qué cuenta, incluidos :is(), :not() y :where().
- Copia los resultados como texto para compartirlos en una revisión de código o un ticket.
Reglas de especificidad de un vistazo
| Parte del selector | Ejemplo | Cuenta como |
|---|---|---|
| ID | #header | (1, 0, 0) |
| Clase | .btn | (0, 1, 0) |
| Atributo | [type="text"] | (0, 1, 0) |
| Pseudoclase | :hover, :nth-child(2) | (0, 1, 0) |
| Tipo (elemento) | div, li | (0, 0, 1) |
| Pseudoelemento | ::before, ::placeholder | (0, 0, 1) |
:is(), :not(), :has() | :not(#a, .b) | Argumento más específico: (1, 0, 0) |
:nth-child(… of S) | :nth-child(2 of .item) | (0, 1, 0) + el más específico de S = (0, 2, 0) |
:where() | :where(#a .b) | (0, 0, 0) |
| Universal, combinadores | *, >, +, ~, espacio | (0, 0, 0) |
Ejemplo resuelto: #nav ul li.active a:hover tiene 1 ID, 2 clases/pseudoclases (.active, :hover) y 3 elementos (ul, li, a), así que su especificidad es (1, 2, 3). Supera a .menu .item .link:hover con (0, 4, 0) porque la primera columna se compara primero.
Cómo decide el navegador qué regla gana
- Origen e importancia: las declaraciones
!importantsuperan a las normales; los estilos del autor superan a los predeterminados del navegador. - Capas de cascada: en las declaraciones normales, los estilos sin capa superan a los que están en capas, y las
@layerposteriores superan a las anteriores. - Estilos en línea: un atributo
style=""supera a cualquier selector. - Especificidad: compara (a, b, c) columna por columna; esto es lo que muestra la calculadora.
- Orden en el código: si todo lo demás empata, gana la declaración que aparece al final.
Consejos: mantén la especificidad baja y plana (sobre todo clases simples), usa :where() para resets y estilos predeterminados de librerías, y evita los IDs en las hojas de estilo para que las sobrescrituras nunca necesiten !important. Ordena hojas de estilo largas con el Formateador de CSS.
Preguntas frecuentes
¿Cómo se calcula la especificidad CSS?
Cuenta tres cosas en el selector: a = número de selectores de ID, b = número de selectores de clase, selectores de atributo y pseudoclases, c = número de selectores de tipo (elemento) y pseudoelementos. El selector universal * y los combinadores (espacio, >, +, ~) no cuentan. Compara primero a, luego b y luego c.
¿La especificidad es un número en base 10, como 1-0-0 = 100?
No. Las tres partes se comparan una a una, nunca se suman. Un ID (1,0,0) supera a cualquier número de clases, así que (1,0,0) gana a (0,11,0) aunque 11 clases 'sumen' más de 100 puntos con el antiguo atajo en base 10.
¿Cómo afectan :is(), :not() y :has() a la especificidad?
Toman la especificidad del selector más específico de su lista de argumentos. :is(#nav, .menu) a cuenta como (1,0,1) incluso cuando coincide a través de .menu. La pseudoclase en sí no añade nada más.
¿Cuál es la especificidad de :where()?
Siempre cero (0,0,0), contenga lo que contenga. Eso hace que :where() sea ideal para estilos predeterminados y resets de CSS que deben ser fáciles de sobrescribir.
¿Dónde encajan los estilos en línea y !important?
Los atributos de estilo en línea superan a cualquier selector, y las declaraciones !important superan a las normales sin importar la especificidad. La especificidad solo se compara entre declaraciones de la misma importancia y origen, y con capas de cascada, el orden de las capas se comprueba antes que la especificidad.
¿Qué pasa cuando dos selectores tienen la misma especificidad?
Gana el que aparece más tarde en el CSS. Por eso importa el orden de tus hojas de estilo y reglas cuando la especificidad empata.
¿El selector de anidamiento & de CSS tiene especificidad?
Sí. En el anidamiento nativo de CSS, & se comporta como :is() alrededor de la lista de selectores padre, así que toma la especificidad del selector padre más específico. Esta herramienta no puede ver la regla padre, así que cuenta & como cero y muestra una nota.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.