Testeur de sélecteurs CSS
Testez des sélecteurs sur du HTML.
À propos de cet outil
Le testeur applique un sélecteur CSS à un petit échantillon HTML et liste les correspondances trouvées. L’analyse se fait localement avec DOMParser, aucun contenu ne quitte le navigateur.
Comment l’utiliser
Modifiez le sélecteur et l’échantillon HTML, lancez le test, puis lisez le nombre de correspondances et les fragments retournés. Comparez ensuite ce résultat avec ce que fait votre code en production.
Exemple
L’échantillon contient une carte avec un titre enfant et une sœur sans la classe.
Entrée
div.card > h2Sortie
1 match(es): <h2>…</h2>Conseil
Excellent support pédagogique pour expliquer :nth-child ou la différence entre combinateur enfant et descendant.
Bon à savoir
Mon HTML est-il envoyé quelque part ?
Non. L'exemple est analysé avec le DOMParser du navigateur sur cette page, et le sélecteur est exécuté avec querySelectorAll.
Pourquoi un sélecteur valide ne renvoie-t-il aucune correspondance ?
Souvent, un combinateur ou un nom de classe est décalé d'un niveau. Vérifiez enfant (>) et descendant (espace), et comparez l'orthographe de la classe avec votre balisage d'exemple.