সিএসএস এট্রিবিউট সিলেক্টর - CSS Attributor Selector


এইচটিএমএল এলিমেন্ট গুলো নির্দিষ্ট এট্রিবিউট বা এট্রিবিউটের মান ব্যবহার করে খুব সহজেই স্টাইল করা যায়। এর জন্য সিএসএস এট্রিবিউট সিলেক্টর ব্যবহার করতে হয়।


নির্দিষ্ট এট্রিবিউটের সাহায্যে স্টাইলিং

শুধু class এবং id এট্রিবিউট ব্যবহার না করেই কেবল মাত্র নির্দিষ্ট এট্রিবিউট ব্যবহার করে এইচটিএমএল এলিমেন্টের স্টাইলিং করা যায়।

নোট - যদি IE7 এবং IE8 এ একটি ডকটাইপ ডিক্লারেশন করা হয় তবেই কেবল Attribute selection কাজ করবে। IE6 কিন্তু Attribute selection সমর্থন বা support করে না।


[attribute] সিলেক্টর

সিএসএস এর [attribute] সিলেক্টর ব্যবহার করে, নির্ধারিত এট্রিবিউট এর জন্য কোন এলিমেন্ট নির্দেশ করা হয়।।

নিচে [attribute] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

/* <a> elements with a title attribute */
a[title] {
   color: red;
   }

কোড এডিটর



[attribute="value"] সিলেক্টর

সিএসএস এর [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"] সিলেক্টর ব্যবহার করা হয়।

নিচে [attribute~="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

[title~="fruite"] {
   border: 2px solid teal;
   }

কোড এডিটর



[attribute|="value"] সিলেক্টর

নির্ধারিত মান দিয়ে শুরু হয় এমন এট্রিবিউটকে কোন এইচটিএমএল এলিমেন্ট এর জন্য নির্ধারণ করতে সিএসএস এর [attribute|="value"] সিলেক্টর ব্যবহার করা হয়।

নিচে [attribute|="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

[class|="top"] {
   background: red;
   }

কোড এডিটর



[attribute^="value"] সিলেক্টর

[attribute^="value"] সিলেক্টর ব্যবহার করে সেই সকল এলিমেন্টকে নির্ধারণ করা হয় যাদের এট্রিবিউট এর মান পূর্ব থেকেই নির্ধারিত।

নিচে [attribute^="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

[class^="top"] {
   background: red;
   }

কোড এডিটর



[attribute$="value"] সিলেক্টর

[attribute$="value"] সিলেক্টর ব্যবহার করে সেই সকল এলিমেন্টকে নির্ধারণ করা হয় যাদের এট্রিবিউট এর মান কোন নির্দিষ্ট মান বা শব্দ দিয়ে শেষ হয়।

নিচে [attribute$="value"] সিলেক্টর ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
   font-style: bold;
   }

কোড এডিটর



[attribute*="value"] সিলেক্টর

[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 ওয়েব পেজটি ব্রাউজ করুন।