Attribute Selectors in Hindi
Attribute Selectors से हम html elements या tags को select कर सकतें उनके attribute के जरिये | सिर्फ attribute name या attribute name के साथ value को उपयोग करके element को target कर सकतें हैं और उसमे मनचाहा style लगा सकतें हैं |
attribute selector को [] square bracket के जरिये लिखी जाती है |
Syntax: Selector[attribute expression] { css style declaration;}
Selector कुछ भी हो सकता है ये कोई tag, id, class हो सकता है | अगर हम selector नहीं भी लेते हैं तब जो attribute को target करेंगे वो सारे element के लिए लागु हो जायेगा |
attribute expression में attribute name या फिर attribute name के साथ कोई value डाल सकतें हैं | attribute की value कुछ special condition के साथ भी दी जा सकती है | जिसे हम attribute selectors types में उदाहरण के साथ समझेगें |
उदाहरण:
<!Document html>
<html>
<head>
<title>CSS Tutorial</title>
<style>
input[type]{background-color:yellow;}
input[type='text']{color:red;}
</style>
</head>
<body>
First Name:<input type="text" id="fname" value="Arush"><br>
Last name:<input type="text" id="lname" value="Shah"><br><br>
<input type="button" value="Example Button">
</body>
</html>
output
attribute selector के उदाहरण में देखिये input[type] के जरिये सारे input type को select करके उसका background color yellow किया |
और input[type=’text’] selector से attribute type और value के जरिये सिर्फ text field का color red किया |
इसी तरह attribute selector में सिर्फ attribute name या फिर उसकी value के साथ कुछ खास condition जोड़ कर selector बना सकतें हैं | और इसी basis से attribute selectors को 7 प्रकार में बाटां गया है जिसे attribute selectors type में पढेंगे |
Attribute Selectors Types एट्रिब्यूट सिलेक्टर कितने प्रकार के होतें हैं?
Attribute या attribute की value इन दोनों को selector के हिसाब से इस्तेमाल किआ जा सकता है | इसीलिए Attribute Selectors 7 type में बांटा गया है |
- A[attr]
- A[attr=val]
- A[attr^=val]
- A[attr|=val]
- A[attr$=val]
- A[attr*=val]
- A[attr~=val]
A element या tag को दर्शा रहा है | attr मतलब attribute को दर्शा रहा है val उस attribute के value को बता रहा है |
उदाहरण: input[type] ->इसमें input एक tag है | और type, <input> tag का attribute है |
तो चलिए सारे attribute selectors को उदाहरण के साथ समझते हैं !
1) A[attr] CSS [attribute] Selector
टेग और उसकी विशेष attribute सिलेक्टर
इस type में किसी टेग या एलिमेंट की एक विशेष एट्रिब्यूट को selector के हिसाब से लिया जाता है |
जैसे: input tag की type attribute या image tag की alt attribute आदि attribute selector कहलायेगा |
उदाहरण:
<style>
input[type]{border:2px solid blue;}
a[target]
</style>
note: ऊपर के दोनों उदाहरण में देखें : input tag की type attribute को लिया गया है selector के रूप में और दुसरे में anchor tag की target attribute को लिया गया है selector के रूप में |
2) A[attr=val] CSS [attribute=value] Selector
Attribute और उसकी विशेष वैल्यू सेलेक्टर
इसमें attribute और उसकी value को selector के हिसाब से लेता है | जैसे <a> anchor tag में target attribute के साथ उसकी value _blank को उदाहरण के रूप में ली गयी है |
उदाहरण: a[target=’_blank’]{color:red;}
Sample Code:
<style>
input[type='text']{border:2px solid blue;}
a[target='_blank']{color:maroon;}
</style>
First Name: <input type="text" /><br><br>
EMail:<input type="email" /><br><br>
<a href="https://in.yahoo.com/" target="_blank">yahoo</a><br>
<a href="https://www.google.com/">google</a>
output:
3) A[attr^=val] CSS [attribute^=value] Selector
Attribute और विशेष वैल्यू से सुरुआत | ^ सिंबल सुरुआती शब्द को दर्शाता है |
इस type के selector में attribute और उसकी value की सुरुआत को ली जाती है |
उदाहरण:
<style>
a[name^='it']{color:darkgreen; font-weight: bold;}
</style>
<a href="abc.com" name="it site" target="_blank">ABC</a>
<br><br>
<a name="used site" href="xyz.com">XYZ</a>
output:
ऊपर के उदाहरण में जिस <a> anchor tag के name attribute की value “it” शब्द से सुरु हुयी, उसी में style लागु हुआ | ये selector, attribute के सुरुआती शब्द को लेकर उसमे css style लगाता है |
4) A[attr$=val] CSS [attribute$=value] Selector
Attribute और उसके विशेष वैल्यू की आखरी शब्द | $ सिंबल आखरी को दर्शाता है |
इस type के selector में attribute और उसकी value की आखरी शब्द को ली जाती है |
उदाहरण:
<style>
img[name$='flower']{border:5px solid blue;}
</style>
<img src="lily.jpg" name="lili flower" />
<br><br>
<img src="rose.jpg" name="rose flower beautiful"/>
उदाहरण में देखिये दो <img> के value में ‘flower’ शब्द हैं | पर $ symbol आखिरी शब्द को लेता है | इसीलिए पेहली <img> tag value के आखिरी में ‘flower’ शब्द है तो उसमे style लगेगा |
5) A[attr*=val] CSS [attribute*=value] Selector
Attribute में value कहीं पर भी हो उसे selector के हिसाब से ली जाती है | * सिंबल से उस विशेष value को दर्शाया जाता है |
उदाहरण:
<style>
img[name*='flower']{ border:5px solid blue; }
</style>
<img src="lily.jpg" name="lili flower" />
<img src="rose.jpg" name="rose flower beautiful" />
दोनों <img> tag में name attribute में flower शब्द है, इसीलिए css style दोनों पे लागू होंगे | चाहे शब्द बिच में हो या आखिरी में या सुरु में, attr*=val selector सबको consider करता है |
6) A[attr~=val] CSS [attribute~=value] Selector
इस तरह के selector में attribute की जो value को ली जाती है वो उसके आगे और पीछे एक space होनि जरुरी है |
जैसे ‘flower’ शब्द को लिया गया और ये दुसरे शब्द से चिपका हुआ है | तो वहां style लागु नहीं होगा | निचे उदाहरण से समझतें हैं :
उदाहरण:
<style>
img[name~='flower']{border:5px solid blue;}
</style>
<img src="lily.jpg" name="lili flower"/>
<img src="rose.jpg" name="roseflower beautiful" />
इस उदाहरण में दो <img> tag हैं, और दोनों के name attribute की value में ‘flower’ है | पर पहली <img> tag में ‘flower’ शब्द के आगे और पीछे space है | इसीलिए उसमे css style लागू हुआ पर दूसरी <img> tag में flower शब्द , rose शब्द से चिपका हुआ है | इसीलिए दूसरी <img> में style लागू नहीं हुआ |
output:
7) A[attr|=val] CSS [attribute|=value] Selector
इस तरह के selector में attribute की सुरुआती value और उसके साथ -(hyphen) सिंबल को ली जाती है |
जैसे ‘flower’ शब्द को लिया गया और इसके बाद -(hyphen) सिंबल भी होना जरुरी है | तो वहां style लागु होगा, निचे उदाहरण में देखें :
<style>
img[name|='flower']{border: 5px solid blue;}
</style>
<img src="lily.jpg" name="flower-lily"/>
<img src="rose.jpg" name="flower rose beautiful" />
इस उदाहरण में दो <img> tag हैं, और दोनों के name attribute की value की सुरुआत ‘flower’ शब्द से हुयी है | पर पहली <img> tag में ‘flower’ शब्द के साथ -(hyphen) भी लगा है | इसीलिए उसमे css style लागू हुआ पर दूसरी <img> tag में flower शब्द सुरु में तो है पर -(hyphen) सिंबल बाद में नहीं है, इसीलिए दूसरी <img> में style लागू नहीं हुआ |