CSS Specificity Calculator

Pruebe los selectores de CSS para ver sus puntuaciones de especificidad, compararlos cabeza a cabeza, y entender cuál gana.

How to use CSS Specificity Calculator

1. Pruebe uno o más selectores CSS en el cuadro de entrada (uno por línea).
2. La especificidad de cada selector se muestra como un triple (a,b,c) con un desglose de IDs, clases y elementos.
3. Cuando entras en varios selectores, el ganador se destaca en verde con una placa 'WINS'.
4. Utilice el gráfico de barras para comparar visualmente la especificidad en todos los selectores.
5. Editar cualquier selector y ver la actualización de los resultados en tiempo real.

¿Cómo se llama?

FAQ

¿Qué significan los números (a,b,c)?

Los tres números representan: a = cuenta de selectores de ID (#id), b = conteo de clases (.class), atributos ([attr]), y pseudoclases (:hover), c = conteo de nombres de elementos (div, p) y pseudoelementos (:before). Un estilo en línea golpea a todos; !importante golpea todo excepto otro !importante.

¿Cómo funciona :is() y :not() especificidad?

Per the CSS Selectors Level 4 spec, :is() and :not() take the specificity of their most specific argument. Por ejemplo, :is(#id, .class) tiene especificidad (1,0,0) — la más alta entre sus argumentos. :ha() trabaja de la misma manera. :where() siempre contribuye (0,0,0) independientemente de sus argumentos.

¿Qué hay de Iimportante?

Las declaraciones importantes anulan las declaraciones normales independientemente de la especificidad. Cuando dos declaraciones importantes conflictos, la especificidad se utiliza para romper la corbata. Esta herramienta calcula la especificidad del selector base solamente — no cuenta para !important.

Related tools

• Box Shadow Generator
• CSS Gradient Generator
• CSS Minifier
• Glassmorphism Generator
• Neumorphism Generator