CSS Attribute Selectors
Introduction to CSS Attribute Selectors
CSS आपको attributes और attribute values के अनुसार elements को design करने की ability provide करती है। यानी की किसी ऐसे element को target किया जा सकता है जिसमे कोई specific attribute या attribute values define की गयी है। इसके लिए CSS में कई attribute selectors available है।
जैसा की आप नाम से ही समझ सकते है attribute selectors किसी element के attributes को select करते है। जिस भी element के attribute attribute selector से match करते है वही element target हो जाता है।
उदाहरण के लिए आप किसी webpage के उन सभी anchor tags को target करना चाहते है जिनके लिए target attribute define किया गया है और उस attribute की value _blank define की गयी है तो ऐसा आप normal selectors द्वारा नहीं कर सकते है। लेकिन attribute selectors द्वारा ऐसा करना बहुत ही आसान है।
आइये अब CSS में available सभी attribute selectors के बारे में detail से जानने का प्रयास करते है।
CSS [attribute] Selector
यह selector ऐसे elements को target करता है जिनमें angular brackets में specify किया गया attribute defined होता है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name]
{
property:value;
}
जैसा की आप ऊपर दिए गए syntax में देख सकते है जिस attribute को match करना है उसे angular brackets में define किया जाता है। इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[target]
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.hindimepadhai.com" target="_blank">Best Hindi Tutorials</a>
<a href="http://www.google.co.in">Google India</a>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute=“value”] Selector
यह selector ऐसे elements को target करता है जिनमें angular bracket में specify किया गया attribute और उसकी same value defined होती है। इस selector में attribute के नाम के आगे assignment operator द्वारा उसकी value भी define की जाती है।
इस selector को define करते समय attribute की value double quotes में define की जाती है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name="value"]
{
property:value;
}
यह selector केवल उन्हीं elements को effect करता है जिनका attribute और उसके लिए define की गयी value exact match करती है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<style>
[class="p1"]
{
background-color:yellow;
}
</style>
</head>
<body>
<p class="p1"> This paragraph will be effected.</p>
<p>This paragraph will not be effected.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute~=“value”]
यह selector ऐसे elements को target करता है जिनमें attribute की value में specify किया गया word शामिल होता है। इस selector को define करते समय attribute के नाम के बाद tilde (~) symbol define किया जाता है और उसके बाद assignment operator लगाकर उस word को double quotes में specify किया जाता है जो किसी element की value में शामिल हो सकता है।
उदाहरण के लिए आप कुछ div को target करना चाहते है जिनमें class attribute define हो और उस attribute की value में animal और flowers word शामिल हो तो ऐसी situation में आप इस selector को use कर सकते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name="containing-word"]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class~="Animal"]
{
width:50px;
height:50px;
background-color:blue;
}
[class~="Flowers"]
{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="Animal Div"> </div>
<div class="Flowers Div"> </div>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute|=“value”] Selector
यह selector ऐसे elements को target करता है जिनमें angular brackets में specify किये गए attribute की value specify किये गए word से start होती हो। इस selector में attribute के नाम के बाद vertical (|) line symbol define किया जाता है और उसके बाद वह word double quotes में लिखा जाता है जिसे आप attribute की value से match करना चाहते है।
यह बात ध्यान रखनी आवश्यक है की word complete होना चाहिए। यदि attribute को define करते समय word से पहले hyphen का प्रयोग किया गया है तो ऐसे में word को define करते समय उसके आगे भी hypen लगाना चाहिए। यदि आप एक complete word नहीं लिखते है तो कोई भी element नहीं target होगा।
उदाहरण के लिए आप ऐसे pargarph element को select करना चाहते है जिसके class attribute की value first से शुरू होती है तो ऐसा आप इस selector द्वारा कर सकते है। इस selector का general syntax निचे दिया जा रहा है।
[attribute-name|="containing-word"]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class|="First"]
{
color:blue;
}
</style>
</head>
<body>
<p class="First-Paragraph">This is first paragraph.</p>
<p class="Second-Paragraph">This is second paragraph.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute^=“value”] Selector
यह selector भी ऐसे elements को target करता है जिनके specify किये गए attribute की value specify किये गए word से शुरू होती है। फर्क सिर्फ इतना है की इस selector में आपको word complete define करने की आवश्यकता नहीं है। यानी की यदि कुछ letters भी define करते है तो यह selectors elements को target करता है।
इस selector को define करते समय attribute के नाम के बाद Circumflex (^) accent symbol define किया जाता है और उसके बाद assignment operator लगाकर double quotes में वह word लिखा जाता है जिसे आप attribute की value से match करना चाहते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name^="containing-word"]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class^="ed"]
{
background:yellow;
}
</style>
</head>
<body>
<p class="red-paragraph">This is red paragraph.</p>
<p class="green-paragraph">This is green paragraph.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute$=“value”] Selectors
यह selector ऐसे elements को target करता है जिनके specify किये गए attribute की value specify किये गए word से end होती है। इस selector को define करते समय attribute के नाम के बाद dollar ($) symbol define किया जाता है और उसके बाद assignment (=) operator लगाकर double quotes में वह word define किया जाता है जिसे आप attribute की value से match करना चाहते है। यह आवश्यक नहीं है की word complete हो।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name$="value"]
{
property:value;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class$="graph"]
{
background-color:green;
}
</style>
</head>
<body>
<span class="first-span">This is first span</span> <br />
<p class="first-paragraph">This is first paragraph</p>
<span class="second-span">This is second span</span></br />
<p class="second-paragraph">This is second paragraph</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS [attribute*=“value”] Selector
यह selector ऐसे elements को target करता है जिनके specify किये गए attribute की value में specify किया गया word हो। यह selector [attribute=“value”] selector की तरह ही है फर्क सिर्फ इतना है की आपको पूरी value exactly specify करने की आवश्यकता नहीं है। आप सिर्फ कुछ letters define कर सकते है जो जिस element के attribute की value से match होंगे वही element target हो जाएगा।
इस selector को define करते समय attribute के नाम के बाद asterisk (*) symbol define किया जाता है और उसके बाद assignment (=) operator लगाकर double quotes में वह word specify किया जाता है जिसे आप match करना चाहते है।
इस selector का general syntax निचे दिया जा रहा है।
[attribute-name*="containing-word"]
{
property:name;
}
इस selector का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<style>
[class*="rst"]
{
background-color:gold;
}
</style>
</head>
<body>
<p class="first-paragraph">This is first paragraph.</p>
<p class="second-paragraph">This is second paragraph.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
