Advanced Selectors
Attribute Selectors
[type="text"], [href^="https"]
💡 Attribute selectors ek filter jaisa hai — "sirf woh saman dikhao jinke label par 'X' likha hai" — HTML attributes ki VALUES ke basis par elements select karna, class/id ke bina.
[attr] — attribute ka hona (value irrelevant). [attr="value"] — exact match. [attr^="value"] — starts with. [attr$="value"] — ends with. [attr*="value"] — contains anywhere. Forms styling, link categorization (jaise external links) ke liye bahut useful.
input[type="text"] {
border: 1px solid gray;
}
input[required] {
border-left: 3px solid red; /* koi bhi required field */
}
a[href^="https://"] {
color: green; /* secure links */
}
a[href$=".pdf"] {
padding-right: 20px;
background: url('pdf-icon.png') no-repeat right; /* PDF links par icon */
}
a[href*="youtube.com"] {
color: red; /* YouTube links */
}🎯
Attribute selectors ek filter jaisa hai — "sirf woh saman dikhao jinke label par 'X' likha hai" — HTML attributes ki VALUES ke basis par elements select karna, class/id ke bina.
1 / 2
⚡ झट से Recap
- [attr] = presence check, [attr="value"] = exact match
- ^= starts with, $= ends with, *= contains
- Forms styling aur link categorization mein bahut useful
इस page में (2 subtopics)
[attr="value" i] (i flag) case-insensitive matching enable karta hai — file extensions jaise cases mein useful jaha .PDF aur .pdf dono match karne chahiye.
a[href$=".pdf" i] {
/* Matches: file.pdf, file.PDF, file.Pdf — sab */
color: red;
}Tip: Case-insensitive flag rarely zaroori hoti hai (URLs/file extensions usually lowercase convention follow karte hain), lekin user-generated content ya legacy systems ke saath deal karte waqt useful safety net hai.
Attribute selectors form validation states ko target karne ke liye bahut useful hain — [required], [disabled], [readonly] jaise attributes directly style kar sakte ho, extra classes add kiye bina.
input:disabled {
background-color: #eee;
cursor: not-allowed;
}
input[readonly] {
background-color: #f9f9f9;
border: none;
}
input:required:invalid {
border-color: red; /* required field jo abhi invalid hai */
}Tip: :required/:disabled/:invalid actually pseudo-CLASSES hain (attribute selectors nahi, technically), lekin conceptually similar use-case (element state target karna) — bahut saath mein use hote hain form styling mein.