CSS सेलेक्टर टेस्टर
चिपकाए HTML पर CSS सेलेक्टर टेस्ट करें और हर मैच हुआ एलिमेंट उसके मार्कअप और टेक्स्ट के साथ देखें। querySelectorAll इस्तेमाल होता है, इसलिए नतीजे ब्राउज़र से हूबहू मिलते हैं।
CSS सेलेक्टर टेस्टर क्या है?
CSS सेलेक्टर टेस्टर आपके चिपकाए HTML पर सेलेक्टर चलाकर हर मैच हुए एलिमेंट को उसके outer HTML और टेक्स्ट कंटेंट के साथ सूचीबद्ध करता है। यह वह सब सपोर्ट करता है जो आपका ब्राउज़र करता है, एट्रिब्यूट सेलेक्टर से लेकर :not(), :is(), :has() और :nth-child() तक।
CSS सेलेक्टर टेस्टर का उपयोग कैसे करें
- CSS सेलेक्टर डालें, जैसे
nav li:not(.active) > a[href^="/"]। - HTML चिपकाएं या एडिट करें।
- मैच की संख्या और हर मैच का हाइलाइट किया मार्कअप पढ़ें।
- Copy बटन से मैच हुआ सारा HTML कॉपी करें।
उदाहरण
nav li:not(.active) > a[href^="/"] on the sample HTML
1 match: <a href="/blog" data-track="nav">Blog</a>
a[href] सैंपल के सभी 4 लिंक से मिलता है।
CSS सेलेक्टर टेस्टर का उपयोग कब करें
इसे CSS नियम, टेस्ट ऑटोमेशन (Playwright, Cypress), वेब स्क्रैपिंग या document.querySelector कॉल के लिए सेलेक्टर लिखने में इस्तेमाल करें। यह स्टाइल लागू नहीं करता या specificity नहीं गिनता, और :hover जैसे डायनामिक pseudo-class स्टैटिक दस्तावेज़ में कभी मैच नहीं होते।
CSS सेलेक्टर टेस्टर कैसे काम करता है
HTML DOMParser से अलग दस्तावेज़ में पार्स होता है (स्क्रिप्ट निष्पादित नहीं होतीं) और सेलेक्टर querySelectorAll() को दिया जाता है। इसलिए मैचिंग ठीक वही है जो आपका ब्राउज़र करता है, नए Selectors Level 4 फ़ीचर के उसके सपोर्ट स्तर समेत। अमान्य सेलेक्टर पकड़कर रिपोर्ट होते हैं। 200 तक मैच दिखाए जाते हैं।
सामान्य उपयोग मामले
- जाँचना कि Playwright लोकेटर ठीक एक बटन से मिलता है।
- प्रोडक्ट क़ीमतों के लिए स्क्रैपर सेलेक्टर बनाना।
- सीखना कि कॉम्बिनेटर (>, +, ~) और :not() कैसे व्यवहार करते हैं।
- टेस्ट करना कि आपका ब्राउज़र :has() सपोर्ट करता है या नहीं।
अक्सर पूछे जाने वाले प्रश्न
मेरा सेलेक्टर स्क्रैप किए पेज में कुछ क्यों नहीं पकड़ता?
हो सकता है पेज अपना HTML JavaScript से बनाता हो। मूल सोर्स नहीं, DevTools से रेंडर किया HTML (Copy outerHTML) चिपकाएं।
क्या :has() सपोर्टेड है?
हाँ, मौजूदा Chrome, Edge, Safari और Firefox में। टेस्टर आपका ब्राउज़र इस्तेमाल करता है, इसलिए पुराने ब्राउज़र इसे अमान्य बताते हैं।
क्या यह specificity दिखाता है?
नहीं, यह सिर्फ़ दिखाता है कि कौन-से एलिमेंट मैच होते हैं।