Calculadora de especificidad CSS
Calcula los componentes de especificidad y la puntuación numérica de cualquier selector CSS introducido.
Ejecutar herramienta
Esta calculadora desglosa la especificidad de cualquier regla CSS a partir de la cadena de texto introducida. El cálculo analiza las partes del selector y distribuye los valores en cuatro componentes: identificadores, clases con atributos y pseudoclases, elementos con pseudoelementos, y un valor base redondeado. La primera posición contabiliza los identificadores presentes mediante el símbolo de almohadilla. La segunda posición agrupa las clases, los selectores de atributo y las pseudoclases detectadas. La tercera posición reúne las etiquetas de tipo de elemento y los pseudoelementos. La cuarta posición corresponde a la base del cálculo ponderado. El selector universal no añade valor a ninguno de los niveles. A partir del recuento obtenido, el sistema genera una puntuación numérica ponderando cada nivel con factores de 1000, 100, 10 y 1 respectivamente. Si dejas el campo vacío o introduces únicamente espacios en blanco, obtendrás cuatro ceros y una puntuación total en cero. De este modo, puedes comprobar rápidamente qué regla prevalecerá en tu hoja de estilos.
Instrucciones
- Escribe o pega el selector CSS en la casilla de texto correspondiente.
- Ejecuta la herramienta para iniciar el cálculo de especificidad.
- Examina los cuatro valores de componentes y la puntuación calculada en el panel de resultados.
Ejemplos
- Al introducir #header .nav-item:hover, el panel muestra los componentes correspondientes a 1 identificador, 2 clases o pseudoclases y 0 elementos, con una puntuación ponderada de 1200.
- Si introduces div.container > p::after, el cálculo contabiliza 1 clase y 2 elementos o pseudoelementos, generando los componentes adecuados y una puntuación de 120.
Preguntas frecuentes
¿Cómo influye el selector universal (*) en la especificidad?
El selector universal no aporta ningún punto de especificidad, por lo que no incrementa los componentes ni la puntuación final.
¿Qué ocurre si dejo la casilla de entrada en blanco?
Si no introduces ningún texto o solo escribes espacios en blanco, la herramienta devuelve los cuatro componentes en cero y una puntuación total de cero.
¿Cómo se calcula la puntuación numérica total?
La herramienta multiplica cada uno de los cuatro componentes de especificidad por 1000, 100, 10 y 1 respectivamente, sumando luego los valores para obtener el total ponderado.