# Calculateur de specificite des selecteurs CSS Calcule la specificite des selecteurs CSS, compare les priorites et propose des conseils anti-conflits > Page canonique: https://elysiatools.com/fr/tools/css-selector-specificity-calculator - **Catégorie:** Development - **Mots-clés:** css, specificite, selecteur ## Présentation Saisissez un ou plusieurs selecteurs CSS et loutil calculera la specificite (a, b, c), affichera la priorite et proposera des conseils pour limiter les conflits. ## Entrées - **Selecteurs** (textarea): .card .title #app .sidebar a:hover button.primary:is(:hover,:focus) ## Quand l'utiliser - Lors du débogage de styles qui ne s'appliquent pas comme prévu sur un élément spécifique. - Avant d'ajouter des règles complexes pour éviter l'utilisation excessive et risquée de !important. - Pendant une refonte CSS pour simplifier les sélecteurs et réduire la dette technique du projet. ## Fonctionnement - Saisissez un ou plusieurs sélecteurs CSS dans la zone de texte, un par ligne. - L'outil décompose chaque sélecteur en comptant les identifiants (a), les classes, attributs et pseudo-classes (b), ainsi que les éléments et pseudo-éléments (c). - Le système calcule le score de spécificité global (a, b, c) pour chaque entrée soumise. - Un rapport de comparaison affiche la hiérarchie des priorités et propose des conseils pour limiter les conflits de cascade. ## Cas d'usage - Résolution de conflits de style dans des composants UI complexes avec de multiples héritages. - Audit de feuilles de style héritées pour identifier et supprimer les sélecteurs inutilement lourds. - Vérification de la priorité des sélecteurs lors de l'utilisation de bibliothèques CSS tierces. ## Questions fréquentes ### Qu'est-ce que le score (a, b, c) ? C'est le calcul standard : 'a' pour les ID, 'b' pour les classes, pseudo-classes et attributs, et 'c' pour les éléments et pseudo-éléments. ### L'outil prend-il en charge la pseudo-classe :is() ? Oui, il calcule la spécificité en prenant en compte le sélecteur le plus fort présent dans les arguments de la fonction :is(). ### Comment réduire la spécificité d'un sélecteur ? Privilégiez l'utilisation de classes simples plutôt que des ID et évitez de trop imbriquer vos sélecteurs. ### Est-ce que !important est inclus dans le calcul ? Non, !important n'est pas une valeur de spécificité mais une instruction qui outrepasse la cascade normale. ### Pourquoi mon style est-il écrasé malgré une spécificité identique ? Si les scores sont égaux, c'est la dernière règle déclarée dans le fichier CSS qui l'emporte. ## Outils associés - [Sync de palette Tailwind](https://elysiatools.com/fr/tools/tailwind-color-palette-sync): Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel. - [Simulateur de taches cron](https://elysiatools.com/fr/tools/cron-job-simulator): Simule les prochaines executions dun ou deux cron a 5 champs, met en evidence les chevauchements et les frequences trop denses. - [Référence des codes de statut HTTP](https://elysiatools.com/fr/tools/http-status-reference): Référence complète des codes de statut HTTP (1xx–5xx) avec sens, scénarios typiques et conseils de relance - [Diff visuel de breakpoints responsifs](https://elysiatools.com/fr/tools/responsive-breakpoint-diff): Rend une URL a plusieurs largeurs et affiche les captures, cartes de chaleur et metriques de mise en page. - [Generateur de layout masonry CSS](https://elysiatools.com/fr/tools/css-masonry-layout-generator): Genere des layouts masonry en pur CSS avec breakpoints, espacements et selecteurs ignores - [Detecteur de rupture OpenAPI diff](https://elysiatools.com/fr/tools/openapi-diff-breach-detector): Compare des schemas OpenAPI ou GraphQL, signale les breaking changes et genere un rapport dimpact pour les equipes API - [Calculateur de Cashback](https://elysiatools.com/fr/tools/cash-back-calculator): Calculateur de cashback : saisissez les catégories de dépenses (nom, dépense mensuelle, % cashback) pour calculer le cashback mensuel et annuel, le taux effectif et comparer avec une carte forfaitaire, avec graphique. - [Calculateur de Remboursement de Cartes de Crédit](https://elysiatools.com/fr/tools/credit-card-payoff): Planificateur de remboursement de cartes : saisissez plusieurs cartes (nom, solde, APR, paiement min %) et comparez avalanche (APR élevé) vs boule de neige (solde bas) en durée, intérêts et économies, avec courbes de solde. ## Exemples - [Exemples de Sélecteurs CSS](https://elysiatools.com/fr/samples/css-selectors): Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur - [Exemples du Framework CSS Milligram](https://elysiatools.com/fr/samples/milligram): Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants ## Contenu associé - [Création de CSS, mise en page et cascade](https://elysiatools.com/fr/hubs/css-authoring-layout-and-cascade-workflows): Créez et révisez du CSS avec formatage, diagnostic des sélecteurs, extraits responsives, effets visuels et contrôles rendus.