# Extracteur de Sélecteurs CSS Extrait et catégorise tous les sélecteurs CSS du contenu CSS > Page canonique: https://elysiatools.com/fr/tools/css-selector-extractor - **Catégorie:** Development - **Mots-clés:** css, selector, extractor, class, id, developer, stylesheet, analysis ## Présentation ### Extracteur de Sélecteurs CSS Cet outil vous aide à analyser et extraire les sélecteurs CSS de vos feuilles de style : **Types de Sélecteurs pris en charge :** - **Sélecteurs de Classe** : .class-name, .multiple.classes - **Sélecteurs d'ID** : #id-name - **Sélecteurs d'Élément** : div, span, button - **Sélecteurs d'Attribut** : [type="text"], [data-*] - **Pseudo-classes** : :hover, :nth-child(2), :not(.class) - **Pseudo-éléments** : ::before, ::after, ::first-line - **Combinateurs** : descendant (>), adjacent (+), sibling général (~) **Fonctionnalités :** - Ignore les commentaires CSS - Suit les numéros de ligne - Gère les sélecteurs imbriqués (SCSS/LESS) - Prend en charge les @media queries et @keyframes - Déduplique les résultats - Calcule la spécificité CSS ## Entrées - **Contenu CSS** (textarea): Enter your CSS content here... - **Inclure les Media Queries** (checkbox): Include selectors inside @media queries - **Inclure les Images Clés** (checkbox): Include selectors inside @keyframes - **Dédupliquer les Résultats** (checkbox): Remove duplicate selectors from results - **Calculer la Spécificité** (checkbox): Calculate CSS specificity for each selector ## Quand l'utiliser - Lorsque vous auditez la complexité de votre CSS pour identifier les sélecteurs redondants ou inutilisés. - Pour générer une documentation automatique des sélecteurs utilisés dans un projet web. - Quand vous analysez les performances CSS et souhaitez calculer la spécificité des sélecteurs. ## Fonctionnement - Collez ou importez votre contenu CSS dans le champ dédié. - Configurez les options comme l'inclusion des media queries ou le calcul de la spécificité. - L'outil parse le CSS, extrait tous les sélecteurs, et les catégorise par type. - Les résultats sont affichés en JSON, avec des détails comme les numéros de ligne et la spécificité. ## Cas d'usage - Audit de code CSS pour réduire la dette technique et améliorer la maintenabilité. - Création de guides de style en documentant automatiquement les sélecteurs utilisés. - Optimisation des performances en identifiant les sélecteurs à faible spécificité ou complexes. ## Questions fréquentes ### Quels types de sélecteurs sont pris en charge ? Classes, IDs, éléments, attributs, pseudo-classes, pseudo-éléments et combinateurs comme descendant, adjacent et sibling général. ### L'outil gère-t-il les préprocesseurs comme SCSS ? Oui, il prend en charge les sélecteurs imbriqués dans SCSS et LESS. ### Puis-je exclure les media queries des résultats ? Oui, vous pouvez désactiver l'option 'Inclure les Media Queries' pour les ignorer. ### Comment la spécificité CSS est-elle calculée ? L'outil calcule la spécificité selon les règles CSS standard, en comptant les IDs, classes et éléments. ### Les résultats sont-ils dédupliqués par défaut ? Oui, l'option 'Dédupliquer les Résultats' est activée par défaut pour éviter les doublons. ## Outils associés - [Extracteur d'Emails en Vrac](https://elysiatools.com/fr/tools/bulk-email-extractor): Extrayez toutes les adresses e-mail du texte saisi, des articles, du code source Web ou de contenu mixte. Prend en charge la déduplication et l'exportation vers JSON. - [Extracteur de Liens/URL en Masse](https://elysiatools.com/fr/tools/bulk-url-extractor): Extrait tous les liens HTTP/HTTPS du texte avec déduplication et options d'exportation - [Extracteur de Caractères Chinois](https://elysiatools.com/fr/tools/chinese-character-extractor): Extrait tous les caractères chinois du texte, en filtrant la ponctuation, les lettres anglaises, les chiffres et les symboles non chinois - [Extracteur d'Emojis](https://elysiatools.com/fr/tools/emoji-extractor): Extrayez tous les emojis Unicode du texte, ou supprimez optionnellement les emojis - [Extracteur de Hashtags et Mentions](https://elysiatools.com/fr/tools/hashtag-mention-extractor): Extrayez les hashtags (#Sujet) et les mentions d'utilisateur (@NomUtilisateur) du texte des réseaux sociaux comme Twitter, Instagram, etc. - [Extracteur de Source d'Image](https://elysiatools.com/fr/tools/image-source-extractor): Extrayez les URLs d'image (attributs src) du code source HTML. Prend en charge les images en chargement différé et les attributs srcset. - [Extracteur d'Adresses IP](https://elysiatools.com/fr/tools/ip-address-extractor): Extrayez les adresses IPv4 et IPv6 des fichiers journaux, journaux de serveur, traces réseau ou tout contenu texte - [Supprimeur de Balises HTML](https://elysiatools.com/fr/tools/new-html-tag-stripper): Supprime les balises HTML du code et extrait le contenu texte brut ## 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 - [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur - [Échantillons de Texte avec Emojis](https://elysiatools.com/fr/samples/text-with-emoji-samples): Texte multilingue contenant divers emojis Unicode pour tester l'extraction d'emojis - [Exemples de Commentaires de Code](https://elysiatools.com/fr/samples/code-comment-samples): Fichiers de code d'exemple avec différents styles de commentaires pour tester la suppression de commentaires ## 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.