CSS एट्रिब्यूट सिलेक्टर
अब तक आप टैग नाम, class, id और पेड़ के रिश्तों से तत्व ढूँढते थे। कभी HTML खुद सच बता चुका होता है: इस लिंक में target है, वह फ़ील्ड type="email" है, पता https से शुरू होता है। एट्रिब्यूट सिलेक्टर वही सच पढ़ता है — हर हाल के लिए नई class बनाए बिना।
एट्रिब्यूट सिलेक्टर क्या है?
एट्रिब्यूट सिलेक्टर उन तत्वों को ढूँढता है जिनके पास कोई खास HTML एट्रिब्यूट हो। आप सिर्फ «मौजूदगी» जाँच सकते हैं, या मान को सटीक/आंशिक मिला सकते हैं। एट्रिब्यूट का नाम वर्गाकार कोष्ठक में आता है: [attr]।
पाँच रोज़मर्रा के पैटर्न
इनसे लगभग सारा सामान्य एट्रिब्यूट काम कवर हो जाता है।
📊 एट्रिब्यूट सिलेक्टर ऑपरेटर
| पैटर्न | सरल अर्थ | उदाहरण |
|---|---|---|
[attr] |
यह एट्रिब्यूट है (कोई भी मान) | a[target] |
[attr="value"] |
मान ठीक यही है | input[type="email"] |
[attr^="value"] |
मान इस पाठ से शुरू होता है | a[href^="https"] |
[attr$="value"] |
मान इस पाठ पर खत्म होता है | a[href$=".pdf"] |
[attr*="value"] |
यह पाठ मान के अंदर कहीं है | a[href*="docs"] |
सिर्फ मौजूदगी — [attr]
जब कोष्ठक में सिर्फ नाम हो, मतलब: «यह एट्रिब्यूट होना चाहिए।» मान कुछ भी हो — फर्क नहीं पड़ता।
मौजूदगी — नए टैब खोलने वाले लिंक
cssa[target] {
font-weight: 600;
}कब काम आता है?
HTML के वैकल्पिक झंडे: target वाला लिंक, या data-state वाला तत्व — भले ही आप अभी मान न छानें।
सटीक मान — [attr="value"]
= कहता है कि मान अक्षर-दर-अक्षर वही होना चाहिए। मान को आमतौरं उद्धरण में लिखें; साफ़ और सुरक्षित।
सटीक मान — ईमेल फ़ील्ड
cssinput[type="email"] {
border: 1px solid #0f766e;
}class बनाएँ या type इस्तेमाल करें?
अगर HTML में पहले से type="email" है, वही सिलेक्टर में लिखें। नई class (जैसे .email-field) तब चाहिए जब वही रूप उस तत्व पर भी चाहिए जिसमें वह एट्रिब्यूट न हो।
मान की शुरुआत — ^=
^= का मतलब: एट्रिब्यूट का मान इस पाठ से शुरू हो। सुरक्षित पतों या साझा उपसर्ग के लिए बहुत काम का।
शुरू होता है — https लिंक
cssa[href^="https"] {
color: #0f766e;
}मान का अंत — $=
$= का मतलब: मान इस पाठ पर खत्म हो। href या src में फ़ाइल एक्सटेंशन के लिए बढ़िया।
खत्म होता है — PDF लिंक
cssa[href$=".pdf"] {
font-style: italic;
}मान में कहीं — *=
*= कहता है: यह पाठ मान में कहीं भी दिखे। ताकतवर है, पर जल्दी बहुत उदार हो जाता है। अगर शुरू या अंत पता हो, तो ^= या $= अक्सर साफ़तर हैं।
शामिल — पते में docs पथ
cssa[href*="docs"] {
text-decoration: underline;
}अच्छी आदतें
- सिलेक्टर में मान को उद्धरण में लिखें:
type="email" - पेज भरा हो तो टैग नाम भी जोड़ें:
input[type="search"]नंगे[type="search"]से साफ़ पढ़ता है - वर्तनी और अक्षर-आकार HTML जैसा रखें
- हर class को एट्रिब्यूट से न बदलें; जब मार्कअप खुद वही सच रखता हो तब एट्रिब्यूट पर जाएँ
खुद आज़माएँ
- तीन लिंक बनाएँ: एक
https://…, एक.pdfपर खत्म, एक पथ मेंdocs; साथ<input type="email">और<input type="text">। a[href^="https"] { color: #0f766e; }लगाएँ — सिर्फ सुरक्षित लिंक का रंग बदले।a[href$=".pdf"] { font-style: italic; }— PDF लिंक तिरछा हो।input[type="email"] { border-color: #0f766e; }— सिर्फ ईमेल फ़ील्ड को बॉर्डर मिले।- वैकल्पिक:
a[href*="docs"]भी देखें; सख्त उपसर्ग/प्रत्यय से ज़्यादा लिंक पकड़ सकता है।
आम गलतियाँ
- स्पष्ट और सुरक्षित होने पर भी
[type=email]बिना उद्धरण ^=की जगह*=— «शामिल» बीच को भी लेता है और अतिरिक्त लिंक चमकते हैं- सामान्य रूप के लिए
.nameकी जगह[class] - भूलना कि
=पूरा मान चाहता है —type="text"औरtype="textbox"एक नहीं - एट्रिब्यूट नाम मिलाना —
hreflangअलग हैhrefसे
सार
- एट्रिब्यूट सिलेक्टर
[ ]से HTML एट्रिब्यूट पर काम करता है - सिर्फ नाम = मौजूदगी;
== सटीक मान ^=शुरू,$=अंत,*=मान में कहीं भी- सबसे तंग ऑपरेटर चुनें जो अभी भी आपका मतलब कहे
- ज़रूरत हो तो टैग नाम भी सिलेक्टर से जोड़ें
- असली
hrefऔरtypeपर अभ्यास करें और पेज रिफ़्रेश करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी