Calculer la spécificité CSS et savoir quelle règle l'emporte
Collez des sélecteurs pour compter leur spécificité, ou collez du CSS et un élément pour voir la règle appliquée.
- Fonctionne sur votre appareil
- Sans inscription
- Fonctionne hors ligne après une visite
Les styles par défaut et autres feuilles de style sont exclus. Rien n'est envoyé.
| Sélecteur | Spécificité | Poids | Contexte |
|---|
| Règle | Valeur | Spécificité | Couche | Résultat |
|---|
Comment trouver quelle règle CSS l'emporte
- Choisissez un mode : compter les sélecteurs ou trouver la règle gagnante.
- Collez les sélecteurs, ou le CSS, le HTML et la propriété.
- Lisez le score, ou la règle gagnante et la raison pour laquelle chaque autre règle a perdu.
Questions
Comment la spécificité est-elle calculée ?
Chaque id compte 1,0,0, chaque classe, attribut ou pseudo-classe 0,1,0, et chaque nom d'élément ou pseudo-élément 0,0,1. Le sélecteur universel et :where() ne comptent pour rien.
Comment :is(), :not() et :has() sont-ils comptés ?
Ils comptent pour leur argument le plus fort. Ainsi :is(#a, .b) p vaut 1,0,1, car #a est la partie la plus forte dans :is(). La règle :where(#a) p vaut 0,0,1.
Pourquoi une règle dans une couche perd-elle contre une règle simple ?
Pour les déclarations normales, les règles hors de toute couche l'emportent sur les règles en couches. Pour !important, l'ordre s'inverse : une couche antérieure gagne. Un attribut style normal l'emporte sur toutes les règles de feuille de style normales, et un attribut style !important l'emporte sur toutes les autres règles !important.
Mon CSS est-il envoyé quelque part ?
Non. Votre navigateur analyse et compare les sélecteurs dans cet onglet, et rien n'est envoyé à un serveur.
Avis
Aucun avis pour l’instant. Soyez le premier.