← Back to CSS Course | Chapter 6: Selectors & Styling | Lesson 12 of 22

CSS Attribute Selectors

अपने cabinet में files sort करने की कल्पना करें। आपके पास अलग-अलग documents वाले folders हैं। आप उन्हें group करना चाहते हैं, लेकिन specific names बताने के बजाय, आप कहते हैं: 'वे सभी files लाओ जो एक red dot से marked हैं', 'सिर्फ वे files जिनके title में "Tax" शब्द है', या 'सभी documents जो ".pdf" पर खत्म होते हैं'। CSS attribute selectors वही sorting labels हैं। ये आपको HTML elements को इस आधार पर style करने देते हैं कि उनके tags के अंदर कौन-से attributes (जैसे href, title, type, या custom values) declared हैं।

In this page:

  1. Attributes की Presence को Target करना
  2. Exact Attribute Values को Target करना
  3. Word Matches (~=) को Target करना
  4. Ends-With Patterns ($=) को Target करना
  5. Starts-With Patterns (^=) को Target करना
Syntax
css 
[attribute] { }
[attribute="value"] { }
[attribute~="value"] { }
[attribute^="start"] { }
[attribute$="end"] { }
[attribute*="contains"] { }

Attributes की Presence को Target करना

Basic attribute selector (attribute key को brackets [attribute] में wrap करके defined) किसी भी ऐसे element को target करता है जिसके पास specified attribute है, उसकी value चाहे जो भी हो।

Note: किसी title tooltip वाले किसी भी element पर custom cursor styles लागू करने के लिए basic attribute selector इस्तेमाल करें।
Warning: सुनिश्चित करें कि आपकी selector key standard square brackets में enclosed है, वरना browser इसे parse करने में fail हो जाएगा।

उदाहरण: Targeting Presence of Attributes

css 
<style>
[title] {
  cursor: help;
}
</style>
<span title="Extra info">Hover for a tooltip cursor</span>

Exact Attribute Values को Target करना

आप [attribute="value"] syntax इस्तेमाल करके एक specific attribute को एक exact value के साथ target कर सकते हैं। यह अलग-अलग form input types को style करने के लिए बेहद उपयोगी है, जैसे text fields को buttons से अलग करना।

Note: अलग CSS classes की ज़रूरत के बिना अलग-अलग form input fields को साफ़ तरीके से style करने के लिए exact value selectors इस्तेमाल करें।
Warning: exact value match case-sensitive है और इसे double quotes के अंदर लिखा जाना चाहिए।

उदाहरण: Targeting Exact Attribute Values

css 
<style>
[type="text"] {
  border: 1px solid gray;
}
</style>
<input type="text">
<input type="submit" value="Go">

Word Matches (~=) को Target करना

Word match selector [attribute~="value"] किसी भी ऐसे element को target करता है जिसकी attribute value में एक space-separated list के अंदर specified word शामिल हो। यह similar metadata strings share करने वाले element groups को target करने के लिए उपयोगी है।

Note: अपने attributes के अंदर metadata values के आधार पर related elements को group और style करने के लिए word match selector इस्तेमाल करें।
Warning: यह selector सिर्फ पूरे words को match करता है; अगर value किसी लंबे word का हिस्सा है (जैसे colorpicker में picker), तो यह match करने में fail हो जाएगा।

उदाहरण: Targeting Word Matches (~=)

css 
<style>
[class~="featured"] {
  border: 2px solid gold;
}
</style>
<div class="card featured">Matches "featured" as a whole word</div>

Ends-With Patterns ($=) को Target करना

Ends-with selector [attribute$="value"] उन elements को target करता है जिनकी attribute value एक specified string pattern पर खत्म होती है। यह download links को उनके file formats के आधार पर style करने के लिए बेहद उपयोगी है।

Note: अपने download links के बगल में automatically PDF या ZIP icons जोड़ने के लिए ends-with selector इस्तेमाल करें।
Warning: reliable matching सुनिश्चित करने के लिए हमेशा अपने target string patterns को lowercase में लिखें।

उदाहरण: Targeting Ends-With Patterns ($=)

css 
<style>
a[href$=".pdf"] {
  color: red;
}
</style>
<a href="report.pdf">Download report.pdf</a>

Starts-With Patterns (^=) को Target करना

Starts-with selector [attribute^="value"] उन elements को target करता है जिनकी attribute value एक specified string pattern से शुरू होती है। यह आमतौर पर secure 'https://' protocols check करके external links को internal links से अलग style करने के लिए इस्तेमाल होता है।

Note: external links को custom icons से style करने के लिए यह selector इस्तेमाल करें, यह दिखाते हुए कि link आपकी site छोड़ता है।
Warning: protocols match करते समय सावधान रहें क्योंकि कुछ links non-secure http:// protocols इस्तेमाल कर सकते हैं।

उदाहरण: Targeting Starts-With Patterns (^=)

css 
<style>
a[href^="https://"] {
  color: green;
}
</style>
<a href="https://example.com">Secure external link</a>
Live Example
Related Topics

CSS Selectors · CSS Image Sprites · CSS Forms · CSS Image Gallery

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. अपनी CSS selectors में attribute values को double quotes में wrap करना भूल जाना।
  2. values के अंदर partial text matches search करने के लिए word match selectors (~=) इस्तेमाल करना।
  3. string patterns की spelling गलत करना, जो matching के दौरान highly case-sensitive होते हैं।
चैप्टर सारांश
  • Attribute selectors elements को उनके HTML attributes की presence, exact value, या partial value patterns के आधार पर target करते हैं।
  • [attribute="value"] से exact matches, [attribute$="value"] से ending patterns, और [attribute^="value"] से starting patterns target करें।
  • form inputs, file downloads, और external link behaviors को automatically साफ़ तरीके से format करने के लिए इन selectors का इस्तेमाल करें।
ब्राउज़र सपोर्ट

Standard CSS attribute selectors हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Sprites Next Lesson → CSS Forms

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.