सीएसएस सिलेक्टर्स सटीक सामग्री ट्रैकिंग की कुंजी हैं। जानें कि आप उन सीएसएस सिलेक्टर्स की पहचान कैसे करें और उनका उपयोग कैसे करें ताकि आप ठीक उसी सामग्री को लक्षित कर सकें जिसे आप मॉनिटर करना चाहते हैं।
सीएसएस सिलेक्टर्स क्या हैं?
सीएसएस सिलेक्टर्स वेबपेज पर एलिमेंट्स को चुनने के लिए उपयोग किए जाने वाले पैटर्न हैं। Trackr में, वे हमारी प्रणाली को ठीक-ठीक बताते हैं कि पेज के किस हिस्से की परिवर्तनों के लिए निगरानी करनी है।
मूल चयनकर्ता प्रकार
- आईडी सिलेक्टर:
#product-price- विशिष्ट आईडी वाले एलिमेंट को लक्षित करता है - क्लास सिलेक्टर:
.price-display- विशिष्ट क्लास वाले एलिमेंट्स को लक्षित करता है - एलिमेंट सेलेक्टर:
h1- विशिष्ट HTML तत्वों को लक्षित करता है - एट्रिब्यूट सिलेक्टर:
[data-price]- विशिष्ट विशेषताओं वाले एलिमेंट्स को लक्षित करता है
सीएसएस सिलेक्टर कैसे खोजें
विधि 1: ब्राउज़र एक्सटेंशन (सबसे आसान)
हमारा ब्राउज़र एक्सटेंशन आपके लिए स्वचालित रूप से CSS सेलेक्टर्स बनाता है!
- Trackr ब्राउज़र एक्सटेंशन इंस्टॉल करें
- उस पेज पर जाएँ जिसे आप ट्रैक करना चाहते हैं
- एक्सटेंशन आइकन पर क्लिक करें और एलिमेंट चुनें
- सीएसएस सिलेक्टर स्वचालित रूप से उत्पन्न होता है
विधि 2: ब्राउज़र डेवलपर टूल्स
मैन्युअल CSS सेलेक्टर बनाने के लिए:
- जिस एलिमेंट को आप ट्रैक करना चाहते हैं उस पर राइट-क्लिक करें
- "Inspect" या "Inspect Element" चुनें
- डेवलपर टूल्स में, हाइलाइट किए गए HTML एलिमेंट पर राइट-क्लिक करें
- "कॉपी" → "चयनात्मक कॉपी करें" चुनें
- सेलेक्टर को Trackr में पेस्ट करें
ब्राउज़र-जनित सिलेक्टर्स चेतावनी
ब्राउज़र-जनित सेलेक्टर्स अत्यधिक जटिल और नाजुक हो सकते हैं। यदि पेज की संरचना थोड़ी भी बदल जाए तो ये टूट सकते हैं। कॉपी करने के बाद इन्हें सरल बनाने पर विचार करें।
सामान्य चयनकर्ता पैटर्न
कीमत ट्रैक करना
.product-price span.amount
किसी उत्पाद की कीमत वाले कंटेनर के अंदर कीमत की राशि को लक्षित करता है
शीर्षक/हेडिंग का पता लगाना
h1.article-title
विशिष्ट क्लास वाले मुख्य शीर्षक को लक्षित करता है
स्टॉक स्थिति ट्रैक करना
#availability-status
स्टॉक उपलब्धता दिखाने वाले ID वाले एलिमेंट को लक्षित करता है
विशिष्ट डेटा एट्रिब्यूट को ट्रैक करना
[data-product-id="12345"] .price
विशिष्ट डेटा एट्रिब्यूट वाले एलिमेंट के भीतर मूल्य को लक्षित करता है
सीएसएस सिलेक्टर सर्वोत्तम अभ्यास
अच्छे सिलेक्टर:
#price- सरल आईडी.product-title- वर्णनात्मक क्लास[data-testid="price"]- स्थिर डेटा एट्रिब्यूट.main-content h1- स्पष्ट पदानुक्रम
इनसे बचें:
div > div > span:nth-child(3)- अत्यधिक विशिष्ट.css-1x2y3z4- स्वचालित रूप से उत्पन्न क्लासेसbody > div:nth-child(5)- स्थिति-निर्भर
चयनाकारक दिशानिर्देश
- जटिल पथों की बजाय आईडी और अर्थपूर्ण क्लास नामों को प्राथमिकता दें
- स्थिति-आधारित चयनकर्ताओं से बचें जैसे
:nth-child() - डेटा एट्रिब्यूट्स का उपयोग करें जब वे उपलब्ध हों - वे स्थिर होते हैं
- चयनाकारों को अद्वितीय बनाए रखते हुए यथासंभव संक्षिप्त रखें
- कार्य बनाने से पहले अपने सेलेक्टर का पेज पर परीक्षण करें
अपने सेलेक्टर्स का परीक्षण
ट्रैकिंग टास्क बनाने से पहले, अपने CSS सेलेक्टर का सही से काम करना सत्यापित करें:
ब्राउज़र कंसोल परीक्षण
- उस पेज को खोलें जिसे आप ट्रैक करना चाहते हैं
- डेवलपर टूल्स खोलने के लिए F12 दबाएँ
- कंसोल टैब पर जाएँ
- प्रकार:
document.querySelector('YOUR_SELECTOR_HERE') - Enter दबाएँ - यदि यह कोई एलिमेंट लौटाता है, तो आपका सेलेक्टर काम कर रहा है!
प्रो टिप: एकाधिक तत्व
यदि आपका सेलेक्टर कई एलिमेंट्स से मेल खाता है, तो का उपयोग करें document.querySelectorAll('YOUR_SELECTOR') सभी मिलान देखने के लिए। आपको अपना सेलेक्टर अधिक विशिष्ट बनाना पड़ सकता है।
सामान्य समस्याओं का निवारण
सेलेक्टर सामग्री नहीं ढूंढ पा रहा है
सामग्री जावास्क्रिप्ट के साथ गतिशील रूप से लोड हो सकती है।
समाधान: अपने टास्क सेटिंग्स में ब्राउज़र रेंडरिंग सक्षम करें
चयनाकार कई तत्वों से मेल खाता है
आपका सेलेक्टर बहुत व्यापक है और एक से अधिक तत्वों का चयन करता है।
समाधान: अधिक विशिष्ट क्लास जोड़ें या सीमा को संकीर्ण करने के लिए पैरेंट एलिमेंट का उपयोग करें
साइट अपडेट के बाद सेलेक्टर काम करना बंद कर देता है
वेबसाइट ने अपनी HTML संरचना या क्लासेस बदल दी हैं।
समाधान: ब्राउज़र एक्सटेंशन या डेवलपर टूल्स का उपयोग करके अपने सेलेक्टर को अपडेट करें
चॉइसर शीट
मूल चयनकर्ता
#id |
ID वाले एलिमेंट |
.class |
क्लास के साथ एलिमेंट |
element |
HTML तत्व का प्रकार |
[attr] |
में विशेषता है |
कॉम्बिनेटर्स
A B |
B, A के अंदर (वंशज) |
A > B |
B A का प्रत्यक्ष बच्चा |
A + B |
B A के बाद (सहोदर) |
A.B |
A जिसमें B की क्लास है |
अगले कदम
अब जब आप CSS सेलेक्टर्स को समझ गए हैं, तो कंटेंट टाइप्स के बारे में जानें ताकि आपका ट्रैक किया गया कंटेंट सही ढंग से पार्स हो सके।
सामग्री प्रकारों के बारे में जानें
