Testeur de sélecteurs CSS

Testez des sélecteurs CSS sur du HTML collé et voyez chaque élément correspondant avec son balisage et son texte. Utilise querySelectorAll : résultats identiques au navigateur.

Sélecteur CSS

Code HTML

Le HTML est analysé avec DOMParser et interrogé avec querySelectorAll, exactement comme dans votre navigateur (la prise en charge de CSS Selectors Level 4 dépend du navigateur). Les scripts du HTML collé ne sont pas exécutés.

Qu'est-ce que Testeur de sélecteurs CSS ?

Le testeur de sélecteurs CSS exécute un sélecteur sur le HTML que vous collez et liste chaque élément correspondant avec son HTML externe et son contenu texte. Il prend en charge tout ce que gère votre navigateur, des sélecteurs d'attributs à :not(), :is(), :has() et :nth-child().

Comment utiliser Testeur de sélecteurs CSS

Saisissez un sélecteur CSS, par ex. nav li:not(.active) > a[href^="/"].
Collez ou modifiez le HTML.
Lisez le nombre de correspondances et le balisage mis en évidence de chacune.
Copiez tout le HTML correspondant avec le bouton Copier.

Exemple

Entrée

nav li:not(.active) > a[href^="/"] on the sample HTML

Sortie

1 match: <a href="/blog" data-track="nav">Blog</a>

a[href] correspond aux 4 liens de l'exemple.

Quand utiliser Testeur de sélecteurs CSS

Utilisez-le pour écrire des sélecteurs pour des règles CSS, l'automatisation de tests (Playwright, Cypress), le web scraping ou des appels document.querySelector. Il n'applique pas de styles et ne calcule pas la spécificité, et les pseudo-classes dynamiques comme :hover ne correspondent jamais dans un document statique.

Comment fonctionne Testeur de sélecteurs CSS

Le HTML est analysé dans un document détaché avec DOMParser (les scripts ne sont pas exécutés) et le sélecteur est passé à querySelectorAll(). La correspondance est donc exactement celle de votre navigateur, y compris son niveau de prise en charge des fonctionnalités récentes de Selectors Level 4. Les sélecteurs invalides sont interceptés et signalés. Jusqu'à 200 correspondances sont affichées.

Cas d'utilisation courants

Vérifier qu'un localisateur Playwright correspond à exactement un bouton.
Construire un sélecteur de scraper pour des prix de produits.
Comprendre le comportement des combinateurs (>, +, ~) et de :not().
Tester si votre navigateur prend en charge :has().

Questions Fréquentes

Pourquoi mon sélecteur ne correspond-il à rien dans une page récupérée ?

La page construit peut-être son HTML avec JavaScript. Collez le HTML rendu depuis les DevTools (Copy outerHTML), pas le code source d'origine.

:has() est-il pris en charge ?

Oui dans les versions actuelles de Chrome, Edge, Safari et Firefox. Le testeur utilise votre navigateur : les navigateurs plus anciens le signaleront comme invalide.