Attribute Selector
HTML attributes ke basis pe elements target karta hai.
Basic — [attr]
[type] { } kisi bhi element pe jo type attribute ho.
Partial Match
[href^="https"] shuru hota hai. [href$=".pdf"] end hota hai.
Data Attributes
<div data-status="active"> phir [data-status="active"] { }.
attribute.css
input[type="text"] {
border: 2px solid #e5e7eb;
padding: 10px 14px;
}
a[href^="https://"]::after {
content: " ↗";
}
a[href$=".pdf"] {
color: #ef4444;
}
[data-status="active"] {
background: #f0fdf4;
}💡 Pro Tips
- Classes jaisi specificity (0,1,0)
- Form styling ke liye perfect
^=shuru,$=end,*=kahin bhi