Selector — element, class, id, attribute আর combinator

১ · Selector কী করে — DOM গাছ থেকে element বাছাই

স্কুলের মাঠে সমাবেশ চলছে। প্রধান শিক্ষক মাইকে বললেন, “দশম শ্রেণির সবাই হাত তুলবে।” তারপর, “যারা স্কাউট দলের, তারা সামনে আসবে।” শেষে, “শুধু রোল এক মঞ্চে আসবে।” খেয়াল করুন, প্রতিবার নির্দেশের প্রথম অংশটি ঠিক করে দিচ্ছে কারা শুনবে, আর দ্বিতীয় অংশ বলছে কী করবে।

CSS ঠিক এভাবেই কাজ করে। পর্ব ১৬-এ আপনি দেখেছেন, প্রতিটি CSS rule-এর দুটি ভাগ — বাঁয়ে selector, তারপর বাঁকা বন্ধনীর ভেতরে এক বা একাধিক declaration. Selector হলো সেই মাইকের ঘোষণার প্রথম অংশ: “এই এই element-এর জন্য…” Declaration হলো কাজের নির্দেশ: “এদের রং হবে সবুজ।”

.sale .price  {  color: green;  font-weight: bold;  }
└─ selector ─┘   └──────── declarations ───────┘

কিন্তু ব্রাউজার element খোঁজে কোথায়? আপনার HTML ফাইলে নয় — ফাইল পড়ে ব্রাউজার মেমরিতে যে গাছ বানায়, সেই DOM-এ (পর্ব ৩-এ দেখেছেন)। গাছের প্রতিটি শাখা একটি element. Selector গাছের ওপর একটি ছাঁকনির মতো কাজ করে: যে element শর্ত মানে, সে ধরা পড়ে; বাকিরা ছাঁকনি দিয়ে বেরিয়ে যায়। নিচে একটি অনলাইন দোকানের অফার-তালিকার DOM গাছ। “পরে” চাপুন — প্রতিটি ধাপে একটি selector বদলাবে, আর সবুজ দাগে দেখবেন কোন কোন element ধরা পড়ল।

1<main>2  <h2>আজকের অফার3  <ul class="products">4    <li class="card sale" id="featured">5      <h3>ইলিশ মাছ6      <p class="price">৳ ১,২০০7    <li class="card">8      <h3>সুন্দরবনের মধু9      <p class="price">৳ ৮৫০10    <li class="card sale" data-stock="0">11      <h3>আমের আচার12      <p class="price">৳ ৩২০13      <p class="note">স্টকে নেই14  <p>ঢাকার ভেতরে ডেলিভারি ৬০ টাকা

২ · তিন মৌলিক selector — type, class আর id

Type selector — ট্যাগের নাম দিয়ে

Type selector (একে element selector-ও বলে) শুধু ট্যাগের নাম: p, h2, li, button. এটি পাতার সেই ধরনের সব element ধরে। পুরো সাইটের ভিত্তি-স্টাইলের জন্য এটি দারুণ — যেমন সব a-র রং, সব h2-র ফন্ট। কিন্তু “শুধু অফারের দাম” বা “শুধু প্রথম কার্ড” বোঝাতে এটি যথেষ্ট নয়। HTML-এ ট্যাগের নাম case-insensitive, তাই LI লিখলেও কাজ করে — তবে সবাই ছোট হাতের অক্ষরেই লেখেন।

Class selector — একই দলের সবাই

HTML-এ যেকোনো element-এ class attribute দিয়ে এক বা একাধিক নাম লাগানো যায়। Class selector সেই নামের আগে একটি বিন্দু: .sale. একই class যত element-এ খুশি দিতে পারেন — দোকানের তাকে “ছাড়” লেখা লাল স্টিকার যেমন যত পণ্যে খুশি লাগানো যায়।

• এক element-এ কয়েকটি class: class="card sale" — নামগুলো ফাঁকা জায়গা দিয়ে আলাদা। এর মানে দুটি class, “card sale” নামের একটি নয়। তাই class-এর নামের ভেতরে ফাঁকা জায়গা রাখা যায় না।
• দুটি class একসাথে আছে এমন element: .card.sale — মাঝে কোনো ফাঁকা নেই। একে বলে compound selector: একই element-কে সব শর্ত মানতে হবে। আর .card .sale (মাঝে ফাঁকা) সম্পূর্ণ আলাদা জিনিস — “card-এর ভেতরে থাকা sale”. একটি ফাঁকা জায়গা পুরো অর্থ বদলে দেয়; নতুনদের সবচেয়ে বেশি ভুল এখানেই।
• ট্যাগ আর class একসাথে: p.price — শুধু সেই p, যার class-এ price আছে।

Class-এর নাম রাখার অভ্যাস। নাম রাখুন কাজ বা অর্থ দেখে, চেহারা দেখে নয়। .price, .product-card, .error-message ভালো; .green-text, .big-red খারাপ — কাল ডিজাইনার দামকে নীল করতে বললে .green-text-এর ভেতরে নীল রং লেখা হাস্যকর। ছোট হাতের অক্ষর আর হাইফেন (kebab-case) সবচেয়ে প্রচলিত। মনে রাখবেন, class-এর নাম case-sensitive: .Sale আর .sale আলাদা। বড় প্রজেক্টে নাম গোছানোর পদ্ধতি — যেমন BEM বা utility class — পর্ব ৪৬-এ বিস্তারিত।

Id selector — পাতায় একজনই

Id selector হলো # আর তারপর id-এর নাম: #featured. একটি id পাতায় একবারই থাকে, তাই এটি সবসময় একটি element-কে বোঝায় (ভুল করে একই id দুবার দিলে CSS অবশ্য দুটিকেই ধরে, কিন্তু HTML তখন অবৈধ)।

Id-এর আসল কাজগুলো স্টাইলের বাইরে: পাতার ভেতরে লাফ দেওয়ার লিংক (href="#offer", পর্ব ৫), ফর্মে <label for>-এর সাথে input জোড়া (পর্ব ৮), aria-labelledby (পর্ব ১২), আর JavaScript-এ একটি নির্দিষ্ট element খুঁজে নেওয়া। স্টাইলের জন্য id প্রায় কখনো ব্যবহার করবেন না — class দিন। কারণ দুটি:

1. পুনর্ব্যবহার নেই: #featured-এর স্টাইল আরেকটি কার্ডে চাইলে আরেকটি id লাগবে, আর একই CSS আবার লিখতে হবে। Class হলে শুধু নামটি লাগিয়ে দিলেই হয়।
2. অতিরিক্ত শক্তি: দুটি নিয়ম একই element-এ ভিন্ন কথা বললে কোনটি জিতবে, তা ঠিক হয় specificity দিয়ে। সেখানে একটি id-কে কোনো সংখ্যক class মিলেও হারাতে পারে না। ফলে পরে বদলাতে গেলে আরও শক্ত selector বা !important লাগে — একটি অস্বস্তিকর প্রতিযোগিতা শুরু হয়। পুরো হিসাব পরের পর্বে (পর্ব ১৮)।

এবার নিজে বদলে দেখুন। নিচের এডিটরে HTML স্থির (সেই অফার-তালিকা), আপনি শুধু CSS বদলাবেন:

/* type selector — সব li */
li {
  list-style: none;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 4px 12px;
  margin: 8px 0;
}
/* class selector — class-এ sale আছে এমন সব */
.sale { background: #fef3c7; }
.price { color: #15803d; font-weight: bold; }

/* id selector — পাতায় একটিই */
#featured { border: 2px solid #db2777; }

৩ · Universal * আর comma দিয়ে grouping

Universal selector * মানে “যেকোনো element”. একা লিখলে পাতার প্রতিটি element ধরে — html, body থেকে শুরু করে সবচেয়ে ছোট span পর্যন্ত। বাস্তবে এর দুটি প্রচলিত ব্যবহার আছে: পুরো পাতায় একটি নিয়ম বসানো (যেমন * { box-sizing: border-box; }, পর্ব ১৯-এ দেখবেন কেন), আর লেআউটের সমস্যা খুঁজতে সব element-এর চারপাশে সাময়িক দাগ টানা। .card * লিখলে মানে হয় “card-এর ভেতরের সব element”.

কয়েকটি ভিন্ন selector-এ একই স্টাইল দিতে চাইলে প্রতিটির জন্য আলাদা নিয়ম লিখতে হয় না। কমা দিয়ে আলাদা করে লিখলেই হলো: h2, h3 { … }. একে বলে selector list বা grouping. বিয়ের দাওয়াতের কার্ডে “বর ও কনে পক্ষের সবাই” লেখার মতো — দুটি দল, একটি ঘোষণা।

/* universal: প্রতিটি element-এর চারপাশে দাগ */
* { outline: 1px dashed #f43f5e; }

/* grouping: একই নিয়ম কয়েকটি selector-এ */
h2, h3 {
  font-family: system-ui, sans-serif;
  color: #1d4ed8;
}
.price, .note { font-size: 14px; }

/* একটি selector ভুল হলে পুরো নিয়ম বাতিল */
h3, p:hovr { text-decoration: underline; }

৪ · Attribute selector — attribute দেখে বাছাই

সব element-এ class থাকে না, আর থাকা উচিতও নয়। একটি লিংক PDF-এ যাচ্ছে কি না, একটি input ইমেইলের কি না — এই তথ্য তো HTML-এ আগেই লেখা আছে, attribute-এর ভেতরে। Attribute selector সরাসরি সেটা পড়ে। লেখা হয় বর্গ বন্ধনীতে: [attribute] বা [attribute="মান"]. পোস্ট অফিসের বাছাইকারী যেমন খামের ঠিকানার শেষের পোস্টকোড দেখে চিঠি আলাদা থলিতে রাখেন, এটিও তেমনি attribute-এর মানের শুরু, শেষ বা মাঝখান দেখে বাছাই করতে পারে।

চিহ্নগুলো মনে রাখার একটি সহজ উপায় আছে: ^ লেখার শুরুতে বসা টুপি — শুরু; $ অনেক প্রোগ্রামিং ভাষার regular expression-এ লাইনের শেষ বোঝায়; * “যেকোনো জায়গায়”। নিচের স্টেপারে একই সাতটি element-এর ওপর আটটি ধরন একে একে চালিয়ে দেখুন:

1<a href="https://www.bkash.com/">2<a href="/files/Price-List.PDF">3<a href="mailto:help@dokan.com.bd">4<a href="#top">5<input type="email" name="email">6<p lang="en-GB">7<p class="card sale new">

a[href^="https"]   { color: #15803d; }
a[href$=".pdf" i]  { color: #b91c1c; font-weight: bold; }
a[href^="mailto:"] { color: #7c3aed; }
a[href^="#"]       { color: #64748b; }

input[type="email"] { border: 2px solid #2563eb; }
label { display: block; margin: 6px 0; }

[lang|="en"] { font-style: italic; }

৫ · Combinator — সম্পর্ক দিয়ে বাছাই

পরিবারে কাউকে চেনাতে আমরা প্রায়ই সম্পর্ক ব্যবহার করি: “রহিম সাহেবের নাতি”, “করিমের ছেলে”, “বড় বোনের ঠিক পরের জন”। DOM গাছেও প্রতিটি element-এর parent, child, sibling আর ancestor আছে (পর্ব ৩)। Combinator হলো দুটি selector-এর মাঝখানের সেই চিহ্ন, যা এই সম্পর্ক বোঝায়। চারটি combinator:

দুটি নিয়ম খেয়াল রাখুন। প্রথমত, সব combinator-এ ফল হয় ডান দিকের element — h2 + p p-কে ধরে, h2-কে নয়। দ্বিতীয়ত, sibling combinator শুধু সামনের দিকে দেখে: h2 ~ p h2-এর আগের p-কে ধরে না। (আগের ভাই-বোন বা parent-কে ধরার ক্ষমতা অনেক পরে এসেছে :has()-এর মাধ্যমে — পর্ব ৩৪-এ।) একটি খিচুড়ির রেসিপির গাছে চারটিকে পাশাপাশি দেখুন:

1<article>2  <h2>খিচুড়ির রেসিপি3  <p>ভূমিকা4  <p>উপকরণ5  <div class="tip">6    <p>টিপস: চাল আগে ভিজিয়ে রাখুন7  </div>8  <p>পরিবেশন9</article>

/* descendant: article-এর ভেতরে যেকোনো গভীরতায় p */
article p { color: #64748b; }

/* child: article-এর সরাসরি সন্তান p */
article > p { border-left: 4px solid #f59e0b; padding-left: 8px; }

/* next-sibling: h2-এর ঠিক পরের p */
h2 + p { font-weight: bold; }

/* subsequent-sibling: h2-এর পরের সব ভাই-বোন p */
h2 ~ p { background: #fef9c3; }

.tip { border: 1px dashed #94a3b8; padding: 0 8px; }

৬ · ব্রাউজার selector পড়ে ডান থেকে বাঁয়ে

আমরা .menu li a বাঁ থেকে ডানে পড়ি: “menu-র ভেতরে, li-এর ভেতরে, a”. স্বাভাবিকভাবে মনে হয়, ব্রাউজারও আগে .menu খুঁজবে, তারপর তার ভেতরে li, তারপর a. কিন্তু আসলে ব্রাউজার উল্টো দিক থেকে কাজ করে।

কারণটা প্রশ্নের ধরনে। ব্রাউজারের আসল প্রশ্ন “এই selector কাকে কাকে ধরে?” নয় — বরং প্রতিটি element-এর জন্য, “এই element-টিতে কোন কোন নিয়ম খাটে?” তাই সে একটি element হাতে নিয়ে selector-এর সবচেয়ে ডানের অংশ — একে বলে key selector — আগে মেলায়। না মিললে সঙ্গে সঙ্গে বাদ, বাকি অংশ পড়ারই দরকার নেই। মিললে বাঁ দিকে এগিয়ে ancestor-দের মধ্যে বাকি শর্ত খোঁজে। বেশিরভাগ element প্রথম ধাপেই বাদ পড়ে, তাই কাজটি দ্রুত হয়।

1<body>2  <nav class="menu">3    <ul>4      <li>5        <a>হোম6  <footer>7    <a>যোগাযোগ

ব্রাউজারের এই selector ইঞ্জিন শুধু CSS-এর জন্য নয়। JavaScript-এর querySelectorAll() আর matches() একই ইঞ্জিনকে প্রশ্ন করে — তাই একটি selector কাকে ধরছে, তা সরাসরি গুনে দেখা যায়। নিচের কোডটি চালান (JavaScript পরে শিখবেন; এখানে শুধু ফলাফল পড়ুন):

// প্রতিটি selector কয়টি element ধরে?
const tests = ['li', '.sale', '#featured', 'p', 'li p',
               '.sale .price', '.card.sale', '.card .sale',
               'li > .note', '[data-stock="0"] h3'];
for (const s of tests) {
  console.log(s.padEnd(20), '->', document.querySelectorAll(s).length);
}

// একটি element কি একটি selector মানে?
const honey = document.querySelectorAll('li')[1];
console.log('honey matches .card ?', honey.matches('.card'));
console.log('honey matches .sale ?', honey.matches('.sale'));
console.log('closest list class :', honey.closest('ul').className);

৭ · Pseudo-class-এর এক ঝলক — :hover, :first-child, :nth-child

এ পর্যন্ত সব selector element-কে চিনেছে তার নাম, class বা attribute দিয়ে — যা HTML-এ লেখা আছে। কিন্তু কিছু তথ্য HTML-এ লেখা থাকে না: মাউস এখন কোন element-এর ওপর? এই li তালিকার প্রথম না তৃতীয়? Pseudo-class এই অবস্থা আর অবস্থান দেখে বাছাই করে। শুরুতে একটি কোলন থাকে, আর এটি অন্য selector-এর গায়ে লেগে বসে: li:first-child, a:hover.

• :hover — মাউস যখন element-এর ওপর। ফোনে মাউস নেই, তাই সেখানে আঙুল ছোঁয়ালে আচরণ ব্রাউজারভেদে ভিন্ন হয় — জরুরি কোনো তথ্য শুধু hover-এ লুকিয়ে রাখবেন না।
• :first-child / :last-child — parent-এর প্রথম বা শেষ সন্তান এবং বাকি শর্তও মানে। li:first-child মানে “যে li তার parent-এর প্রথম সন্তান” — “প্রথম li” নয়; প্রথম সন্তান অন্য কিছু হলে কেউ ধরা পড়ে না।
• :nth-child(…) — ক্রম দিয়ে বাছাই: :nth-child(3) তৃতীয়, odd/even বিজোড়/জোড়, আর :nth-child(3n) প্রতি তিন নম্বরে একটি। গোনা শুরু ১ থেকে, ০ থেকে নয়।

li { padding: 6px 10px; }

/* parent-এর প্রথম সন্তান */
li:first-child { font-weight: bold; }

/* জোড় নম্বরের সারি — ২, ৪, ৬ */
li:nth-child(even) { background: #f1f5f9; }

/* ঠিক তৃতীয়টি */
li:nth-child(3) { color: #b91c1c; }

/* মাউস ওপরে থাকলে */
li:hover { background: #dcfce7; }

Pseudo-class-এর জগৎ অনেক বড়: :focus-visible (কি-বোর্ড ব্যবহারকারীর জন্য জরুরি), :checked, :user-invalid (পর্ব ৯-এ দেখেছেন), :empty, :target আর parent বাছাইয়ের :has(). পুরো আলোচনা — সাথে ::before-এর মতো pseudo-element — পর্ব ৩৪-এ।

৮ · :is(), :where() আর :not() — আধুনিক grouping

ধরুন header, main আর footer — তিন জায়গার লিংককেই একই স্টাইল দিতে চান, কিন্তু অন্য কোথাও নয়। পুরোনো উপায়ে লিখতে হতো header a, main a, footer a. বড় সাইটে এই তালিকা বিশাল হয়ে যায়। তিনটি আধুনিক pseudo-class এই কাজ সহজ করে, এবং তিনটিই এখন সব প্রধান ব্রাউজারে আছে (Baseline Widely available).

• :is(…) — বন্ধনীর ভেতরের তালিকার যেকোনো একটি মানলেই হলো। :is(header, main, footer) a = ওপরের লম্বা তালিকা। .card :is(h2, h3) = card-এর ভেতরের h2 বা h3.
• :where(…) — কাজে হুবহু :is()-এর মতো, পার্থক্য শুধু শক্তিতে (নিচে দেখুন)।
• :not(…) — উল্টো: তালিকার কোনোটিই না মানলে। li:not(.done) = যে কাজগুলো এখনো বাকি। আধুনিক ব্রাউজারে এর ভেতরে কমা দেওয়া তালিকা আর combinator-ও চলে: a:not(nav a) = nav-এর বাইরের লিংক।

Specificity-তে তিনজনের পার্থক্য (পুরো হিসাব পর্ব ১৮-এ): :is() আর :not()-এর শক্তি হয় তাদের তালিকার সবচেয়ে শক্তিশালী সদস্যের সমান — তালিকায় একটি id থাকলে পুরো selector id-এর মতো শক্ত। আর :where()-এর শক্তি সবসময় শূন্য, ভেতরে যা-ই থাকুক। এজন্য লাইব্রেরি আর রিসেট স্টাইলশিটে :where() জনপ্রিয় — এমন ডিফল্ট স্টাইল দেওয়া যায়, যা পরে যে কেউ একটি সাধারণ selector দিয়ে বদলাতে পারে।

/* nav অথবা footer-এর ভেতরের লিংক */
:is(nav, footer) a { color: #7c3aed; font-weight: bold; }

/* done class নেই এমন li */
li:not(.done) { color: #b91c1c; }
li.done { text-decoration: line-through; }

/* specificity: :where() = 0, তাই নিচের h3 জেতে */
:where(.card) h3 { color: crimson; }
h3 { color: seagreen; }

৯ · Selector-এর গতি — ভুল ধারণা, আসল খরচ আর selector খেলা

ইন্টারনেটে প্রায়ই পরামর্শ দেখবেন: “* ব্যবহার করবেন না, ধীর”, “descendant selector এড়িয়ে চলুন”, “id সবচেয়ে দ্রুত, তাই id দিন”। এগুলোর শিকড় ২০০০ সালের দিকের কিছু লেখায়, যখন কম্পিউটার আর ব্রাউজার ইঞ্জিন দুটোই অনেক ধীর ছিল। আজকের অবস্থা আলাদা।

তাহলে আসল খরচ কোথায়? বড় সাইটে CSS-এর গতির সমস্যা সাধারণত আসে (১) বিশাল DOM থেকে — হাজার হাজার element, প্রতিটির জন্য হাজার হাজার নিয়ম; (২) JavaScript ঘনঘন DOM বা class বদলালে বারবার style recalculation থেকে; আর (৩) ব্যবহার না হওয়া বিশাল CSS ফাইল ডাউনলোড আর পড়ার সময় থেকে (পর্ব ৪৯)। অনুমান না করে মাপুন: Chrome DevTools-এর Performance প্যানেলে রেকর্ড করলে “Recalculate Style” অংশে দেখা যায় স্টাইল হিসাবে কত সময় গেল, আর সাম্প্রতিক সংস্করণে selector-ভিত্তিক পরিসংখ্যান (selector stats) চালু করার অপশনও আছে।

Selector খেলা — কোন কোন নম্বর সবুজ হবে?

এবার অনুশীলনের পালা। নিচের HTML-এ প্রতিটি element-এর গায়ে একটি নম্বর লেখা আছে। এডিটর চালানোর আগে কাগজে লিখুন রাউন্ড ১-এ কোন কোন নম্বর সবুজ হবে — তারপর মিলিয়ে দেখুন। পরের রাউন্ডগুলোর জন্য প্রথম লাইনের selector বদলে মন্তব্যে দেওয়া selector-গুলো একে একে বসান; উত্তর আছে অনুশীলন ১-এ।

/* রাউন্ড ১ — আগে অনুমান, তারপর দেখুন */
.menu > p { background: lightgreen; }

/* পরের রাউন্ড: ওপরের .menu > p মুছে একে একে লিখুন
   ২)  li + li
   ৩)  .hot ~ p
   ৪)  ul ~ p
   ৫)  :not(ul) .hot          */

.menu { border: 1px dashed #94a3b8; padding: 0 10px; }

১০ · AI-এর যুগে — selector লেখার কাজ AI-কে দিলে কী দেখবেন

“এই কার্ডের দামটা সবুজ করে দাও” — AI মুহূর্তেই CSS দেবে। সমস্যা হলো, AI আপনার আসল DOM দেখে না; সে অনুমান করে HTML দেখতে কেমন। তাই তার selector প্রায়ই হয় অতিরিক্ত লম্বা, অতিরিক্ত শক্ত, অথবা এমন কাঠামো ধরে নেয় যা আপনার পাতায় নেই — আর CSS কোনো error দেখায় না বলে ভুলটা চুপচাপ থেকে যায়।

AI সাধারণত যেসব selector-ভুল করে

AI-এর দেওয়া selector হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর Elements প্যানেলে Ctrl+F চেপে selector লিখে দেখেছি — ঠিক যতগুলো element চেয়েছিলাম, ততগুলোই ধরছে
• Elements প্যানেলের Styles অংশে নিয়মটি আসলে element-এ বসেছে, কেটে দেওয়া (অন্য নিয়মের কাছে হেরে যাওয়া) নয়
• কোনো id-ভিত্তিক স্টাইল বা !important নেই; selector পড়ে মানুষের ভাষায় বলতে পারি সেটি কাকে ধরে
• নতুন কোনো selector থাকলে MDN-এ অর্থ আর Can I use-এ Baseline অবস্থা দেখেছি; W3C CSS Validator-এ বানান-ভুল ধরা পড়েনি
• Lighthouse-এর Accessibility রিপোর্টে দেখেছি — রং বদলের পর লেখা আর পটভূমির contrast এখনো যথেষ্ট