এইচটিএমএল এলিমেন্ট গুলো নির্দিষ্ট এট্রিবিউট বা এট্রিবিউটের মান ব্যবহার করে খুব সহজেই স্টাইল করা যায়। এর জন্য সিএসএস এট্রিবিউট সিলেক্টর ব্যবহার করতে হয়।
শুধু class এবং id এট্রিবিউট ব্যবহার না করেই কেবল মাত্র নির্দিষ্ট এট্রিবিউট ব্যবহার করে এইচটিএমএল এলিমেন্টের স্টাইলিং করা যায়।
নোট - যদি IE7 এবং IE8 এ একটি ডকটাইপ ডিক্লারেশন করা হয় তবেই কেবল Attribute selection কাজ করবে। IE6 কিন্তু Attribute selection সমর্থন বা support করে না।
সিএসএস এর [attribute] সিলেক্টর ব্যবহার করে, নির্ধারিত এট্রিবিউট এর জন্য কোন এলিমেন্ট নির্দেশ করা হয়।।
নিচে [attribute] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
/* <a> elements with a title attribute */
a[title] {
color: red;
}
সিএসএস এর [attribute="value"] সিলেক্টর ব্যবহার করে, নির্ধারিত এট্রিবিউট এবং মান এর জন্য কোন এলিমেন্ট নির্দেশ করা হয়।
নিচে [attribute="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
/* <a> elements with an href matching "https://www.websschool.com" */
a[href="https://www.websschool.com"] {
color: teal;
}
এট্রিবিউট এর মান রুপে নির্দিষ্ট কিছু শব্দ ব্যবহার করে এমন এলিমেন্ট নির্ধারণ করতে সিএসএস এর [attribute~="value"] সিলেক্টর ব্যবহার করা হয়।
নিচে [attribute~="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
[title~="fruite"] {
border: 2px solid teal;
}
নির্ধারিত মান দিয়ে শুরু হয় এমন এট্রিবিউটকে কোন এইচটিএমএল এলিমেন্ট এর জন্য নির্ধারণ করতে সিএসএস এর [attribute|="value"] সিলেক্টর ব্যবহার করা হয়।
নিচে [attribute|="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
[class|="top"] {
background: red;
}
[attribute^="value"] সিলেক্টর ব্যবহার করে সেই সকল এলিমেন্টকে নির্ধারণ করা হয় যাদের এট্রিবিউট এর মান পূর্ব থেকেই নির্ধারিত।
নিচে [attribute^="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
[class^="top"] {
background: red;
}
[attribute$="value"] সিলেক্টর ব্যবহার করে সেই সকল এলিমেন্টকে নির্ধারণ করা হয় যাদের এট্রিবিউট এর মান কোন নির্দিষ্ট মান বা শব্দ দিয়ে শেষ হয়।
নিচে [attribute$="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: bold;
}
[attribute*="value"] সিলেক্টর ব্যবহার করে এমন এলিমেন্টকে সিলেক্ট করা হয়, যাদের এট্রিবিউটের মান কোন নির্দিষ্ট মান ধারন করে।
নিচে [attribute*="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।
p[title*="hello"]{
color: red;
}
| এট্রিবিউট | উদাহরন | বর্ণনা |
|---|---|---|
| [attribute] | ||
| [attribute="value"] | ||
| [attribute~="value"] | ||
| [attribute|="value"] | ||
| [attribute^="value"] | ||
| [attribute$="value"] | ||
| [attribute*="value"] |
সিএসএস এর এট্রিবিউট সিলেক্টর সম্পর্কে W3C থেকে আরও জানতে Selectors Level 3 ওয়েব পেজটি ব্রাউজ করুন।
সিএসএস এর এট্রিবিউট সিলেক্টর সম্পর্কে Mozillz Developer থেকে আরও জানতে Attribute selectors ওয়েব পেজটি ব্রাউজ করুন।
শেয়ার করুন
