একটি attribute selector এর tag, class, বা id-র বদলে এটা বহন করা একটি HTML attribute-এর উপর ভিত্তি করে একটি এলিমেন্ট target করে — type অনুযায়ী form input, বা destination অনুযায়ী link style করার জন্য useful।
মান যাই হোক, attribute-টা আছে এমন যেকোনো এলিমেন্ট match করে।
input[required] {
border-color: orange;
}input[type="email"] {
background-image: url(email-icon.svg);
}a[href^="https://"] {
/* https://-এ শুরু হওয়া প্রতিটি link */
}a[href$=".pdf"] {
/* .pdf-এ শেষ হওয়া প্রতিটি link — একটি download icon-এর জন্য ভালো */
}a[href*="example.com"] {
/* URL-এর যেকোনো জায়গায় example.com ধারণ করা প্রতিটি link */
}[class~="featured"] {
/* class="card featured" match করে কিন্তু class="unfeatured" না */
}| Selector | যা match করে |
|---|---|
| [attr] | Attribute-টা আছে, যেকোনো মান |
| [attr=value] | Attribute ঠিক value-র সমান |
| [attr^=value] | Attribute value দিয়ে শুরু হয় |
| [attr$=value] | Attribute value দিয়ে শেষ হয় |
| [attr*=value] | Attribute যেকোনো জায়গায় value ধারণ করে |
| [attr~=value] | একটি space-separated list-এ value একটি পুরো শব্দ হিসেবে দেখা যায় |
একটি practical combination
একটি খুব common আসল ব্যবহার: a[href^="https://"]:not([href*="yoursite.com"]) শুধু external link select করে — স্বয়ংক্রিয়ভাবে একটি "opens in new tab" icon যোগ করার জন্য একটি ভালো ভিত্তি।