CSS-এ সিলেক্টর (Selector) কী এবং কীভাবে ব্যবহার করবেন?

CSS Selector: সংজ্ঞা, প্রকার ও ব্যবহার

সিলেক্টর (Selector) হলো CSS-এ যে প্যাটার্ন বা নিয়ম जिसके মাধ্যমে HTML এলিমেন্টকে টার্গেট করে স্টাইল প্রয়োগ করা হয়। সিলেক্টর নির্দেশ করে কোন HTML এলিমেন্ট(গুলো) স্টাইল পাবে।

সিলেক্টর এর анатомি (Anatomy of a Rule)

selector {
  property: value;
  property: value;
}

/* উদাহরণ */
h1 {
  color: #36CFFF;
  font-size: 2rem;
}

এখানে h1 হলো টাইপ সিলেক্টর (Type Selector) — এটি পেজের সকল <h1> এলিমেন্টকে টার্গেট করে।

প্রধান সিলেক্টর প্রকার ও উদাহরণ

সিলেক্টর প্রকার	সিনট্যাক্স	বর্ণনা	উদাহরণ
Universal Selector	`*`	সকল এলিমেন্ট সিলেক্ট করে	`* { box-sizing: border-box; }`
Type Selector	`element`	নির্দিষ্ট ট্যাগ নামের সব এলিমেন্ট	`p { color: #333; }`
Class Selector	`.classname`	নির্দিষ্ট class অ্যাট্রিবিউটযুক্ত এলিমেন্ট	`.btn { background: blue; }`
ID Selector	`#idname`	নির্দিষ্ট ID-র এলিমেন্ট (পেজে একবার)	`#header { height: 60px; }`
Attribute Selector	`[attr]`, `[attr="val"]`	নির্দিষ্ট অ্যাট্রিবিউট/ভ্যালুযুক্ত এলিমেন্ট	`input[type="text"] { border: 1px solid #ccc; }`
Descendant Combinator	`ancestor descendant`	পূর্বজ এলিমেন্টের ভেতরের সন্তান	`nav a { color: white; }`
Child Combinator	`parent > child`	সরাসরি সন্তান এলিমেন্ট	`ul > li { list-style: disc; }`
Adjacent Sibling	`prev + next`	সরাসরি পরবর্তী ভাই-বহন এলিমেন্ট	`h2 + p { margin-top: 0; }`
General Sibling	`prev ~ siblings`	সামনে থাকা সব ভাই-বহন এলিমেন্ট	`h2 ~ p { color: gray; }`
Pseudo-class	`:hover`, `:first-child`	স্পেশাল স্টেট/পজিশন	`a:hover { text-decoration: underline; }`
Pseudo-element	`::before`, `::after`	এলিমেন্টের নির্দিষ্ট অংশ	`p::first-line { font-weight: bold; }`

গ্রুপিং সিলেক্টর (Grouping Selectors)

কমা (`,`) দিয়ে একসাথে একাধিক সিলেক্টর grupe করা যায়:

h1, h2, h3, .title, #main-heading {
  font-family: 'Roboto', sans-serif;
  color: #1a1a1a;
}

স্পেসিফিসিটি (Specificity) — প্রাধান্য ক্রম

যখন একই এলিমেন্টে একাধিক 룰 প্রয়োগ হয়, ব্রাউজার স্পেসিফিসিটি অনুযায়ী ডিসাইড করে কোন রুল জিতবে:

Inline style (style="...") — ১০০০
ID selector — ১০০
Class/Attribute/Pseudo-class — ১০
Type/Pseudo-element — ১
Universal selector — ০

উদাহরণ: #nav .item a:hover স্পেসিফিসিটি = ১০০ (ID) + ১০ (Class) + ১০ (Pseudo-class) + ১ (Type) = ১২১

সেরা অনুশীলন

ID সিলেক্টর কম ব্যবহার করুন (রিইউজেবিলিটি কমায়)।
Class-ভিত্তিক সিলেক্টর (BEM মেথডোলজি) প্রয়োগ করুন।
গভীর নেস্টিং এড়িয়ে চলুন (স্পেসিফিসিটি ওয়ARS এড়াতে)।
Attribute selector ব্যবহার করে ARIA/স্টেট টার্গেট করুন।
DevTools-এ Elements > Styles প্যানেল থেকে সিলেক্টর টেস্ট করুন।