Calculatrice de spécificité CSS

Coller les sélecteurs CSS pour voir leurs scores de spécificité, les comparer en tête à tête et comprendre lequel gagne.

How to use CSS Specificity Calculator

1. Coller un ou plusieurs sélecteurs CSS dans la boîte d'entrée (un par ligne).
2. La spécificité de chaque sélecteur est représentée par un triple (a,b,c) avec une ventilation des ID, des classes et des éléments.
3. Lorsque vous entrez plusieurs sélecteurs, le gagnant est surligné en vert avec un badge 'WINS'.
4. Utilisez le diagramme à barres pour comparer visuellement la spécificité de tous les sélecteurs.
5. Modifier n'importe quel sélecteur et regarder la mise à jour des résultats en temps réel.

Quel est {nom} ?

FAQ

Que signifient les chiffres a, b, c?

Les trois nombres représentent : a = nombre de sélecteurs d'ID (#id), b = nombre de classes (.class), attributs ([attr]), et pseudo-classes (:hover), c = nombre de noms d'éléments (div, p) et pseudo-éléments (::avant). Un style inline bat tout ; !important bat tout sauf un autre !important.

Comment fonctionne :is() et :not() spécificité?

Par les sélecteurs CSS Niveau 4 spec, :is() et :not() prennent la spécificité de leur argument le plus spécifique. Par exemple, :is(#id, .class) a la spécificité (1,0,0) — la plus élevée parmi ses arguments. :has() fonctionne de la même façon. :where() contribue toujours (0,0,0) indépendamment de ses arguments.

Et l'important ?

Les déclarations importantes l'emportent sur les déclarations normales, indépendamment de leur spécificité. Lorsque deux déclarations importantes sont en conflit, la spécificité est utilisée pour briser l'égalité. Cet outil calcule uniquement la spécificité du sélecteur de base — il ne tient pas compte de !important.

Related tools

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