CSS Attribute Selector 사용 করে নির্দিষ্ট অ্যাট্রিবিউটযুক্ত এলিমেন্টগুলোকে সিলেক্ট করে স্টাইল করা যায়।
HTML অ্যাট্রিবিউট
HTML-এ অ্যাট্রিবিউট এলিমেন্টের অতিরিক্ত বৈশিষ্ট্য নির্ধারণ করে (যেমন: href, title, class, id, src)। স্ট্রাকচার: name="value"।
Attribute Selector-এর প্রকারভেদ
১. [attribute] - অ্যাট্রিবিউট উপস্থিতি
[title] { font-size: 16px; }
title অ্যাট্রিবিউট থাকলে সকল এলিমেন্টে প্রয়োগ হবে।
২. element[attribute] - নির্দিষ্ট এলিমেন্ট + অ্যাট্রিবিউট
p[title] { font-size: 16px; }
শুধু <p> ট্যাগ যেগুলো title অ্যাট্রিবিউট রাখে।
৩. [attribute="value"] - নিশ্চিত মান
a[href="careerkarma.com"] { background-color: orange; }
href মান একদম "careerkarma.com" হলে।
৪. [attribute~="value"] - শব্দ হিসেবে মান
p[title~="blue"] { color: blue; }
title-এ "blue" শব্দটি আলাদা করে থাকলে (blue color, color blue - হয়, কিন্তু blueColor - হয় না)।
৫. [attribute|="value"] - হাইফন-সেপারেটেড শুরু
div[class|="top"] { padding-top: 10px; }
class "top" বা "top-*" দিয়ে শুরু হলে (top-style, top - হয়, topstyle - হয় না)।
৬. [attribute^="value"] - নির্দিষ্ট স্ট্রিং দিয়ে শুরু
div[class^="paddingBottom"] { padding-bottom: 10px; }
class "paddingBottom" দিয়ে শুরু হলে (paddingBottomStyle, paddingBottom-element - হয়)।
৭. [attribute$="value"] - নির্দিষ্ট স্ট্রিং দিয়ে শেষ
a[href$=".app"] { color: gray; }
href ".app" দিয়ে শেষ হলে।
৮. [attribute*="value"] - কোথাও মান থাকলে
div[class*="allPadding"] { padding: 50px; }
class-এ "allPadding" স্ট্রিং কোথাও থাকলে (new allPadding, allPaddingblue, allPadding-true - সব হয়)।
উপসংহার
Attribute selector খুব শক্তিশালী টুল যা ক্লাস বা আইডি ছাড়া HTML অ্যাট্রিবিউটের ভিত্তিতে এলিমেন্ট সিলেক্ট করতে দেয়। ৮টি ভেরিয়েন্ট জানলে কোনো পরিস্থিতিতেই সঠিক সিলেক্টর বেছে নিতে পারবেন।
