Pseudo-class আর pseudo-element — :hover, :focus-visible, :has(), ::before

১ · অবস্থা আর অংশ — pseudo-class বনাম pseudo-element

পর্ব ১৭-এ (Selector) দেখেছেন, selector element চেনে তার নাম, class বা attribute দিয়ে — অর্থাৎ HTML-এ যা লেখা আছে তা দিয়ে। কিন্তু অনেক জরুরি তথ্য HTML-এ লেখা থাকে না। মাউস এখন কোন বোতামের ওপর? কোন ঘরে ভুল নম্বর লেখা হয়েছে? এই li তালিকার কততম? অনুচ্ছেদের প্রথম লাইন কোথায় শেষ — সেটি তো স্ক্রিনের চওড়ার ওপর নির্ভর করে!

এই দুই ধরনের প্রশ্নের জন্য CSS-এর দুটি আলাদা হাতিয়ার আছে। Pseudo-class (“সিউডো” মানে ছদ্ম — এমন class যা আপনি লেখেননি, ব্রাউজার নিজে বসায়) element-এর অবস্থা বা অবস্থান দেখে বাছে। আর pseudo-element element-এর এমন একটি অংশ ধরে, যার নিজের কোনো ট্যাগ নেই।

২ · ব্যবহারকারীর কাজে বদলানো অবস্থা — :hover, :active, :focus, :focus-visible

পাঁচটি pseudo-class ব্যবহারকারীর হাতের কাজের সাথে সাথে চালু-বন্ধ হয়:

• :hover — মাউসের তীর element-এর ওপর। ফোন আর ট্যাবে মাউস নেই; সেখানে ছোঁয়ার পর hover “আটকে” থাকতে পারে, আবার না-ও আসতে পারে। তাই জরুরি তথ্য বা মেনু কখনো শুধু hover-এ লুকাবেন না। শুধু মাউসওয়ালা যন্ত্রে hover-সাজ দিতে চাইলে @media (hover: hover) (পর্ব ৩১-এর media query) ব্যবহার করুন।
• :active — চাপ দিয়ে ধরে রাখার মুহূর্তটুকু: মাউসের বোতাম চেপে আছেন, অথবা কি-বোর্ডে Space চেপে ধরেছেন।
• :focus — element-টি এখন focus পেয়েছে, অর্থাৎ কি-বোর্ডের চাপ এখানেই যাবে। কারণ যা-ই হোক — Tab, মাউস-ক্লিক বা JavaScript.
• :focus-visible — focus পেয়েছে এবং ব্রাউজার মনে করছে দাগ দেখানো দরকার।
• :focus-within — নিজে বা ভেতরের যেকোনো বংশধর focus পেয়েছে। পুরো ফর্ম বা কার্ডকে “সক্রিয়” দেখাতে।

:focus থাকতে :focus-visible কেন? কারণ মাউসে ক্লিক করা মানুষ জানেন তিনি কোথায় চাপলেন — বোতামের চারপাশে মোটা নীল দাগ তাঁর কাছে “বাগ” মনে হয়। ডিজাইনাররা তাই বছরের পর বছর outline: none লিখে দাগ মুছে দিতেন, আর কি-বোর্ডে চলা মানুষ (যাঁদের হাতে সমস্যা, screen reader ব্যবহারকারী, দ্রুত কাজ করা অফিসকর্মী) হারিয়ে যেতেন। :focus-visible-এ ব্রাউজার একটি হিসাব (heuristic) চালায়: focus কি-বোর্ড থেকে এলে দাগ দেখায়; মাউসে বোতাম চাপলে দেখায় না; আর লেখার ঘরে (text input) সবসময় দেখায়, কারণ সেখানে কার্সর কোথায় তা জানা দরকার। আজকের সব প্রধান ব্রাউজার নিজেদের ডিফল্ট দাগও :focus-visible দিয়েই দেখায় (Baseline Widely available).

নিচের ডায়াগ্রামে একটি বোতামের জীবনের কয়েক মুহূর্ত দেখুন — কোন মুহূর্তে কোন pseudo-class সত্য, আর তাই কোন CSS নিয়ম খাটে (সবুজ লাইন)।

1button { background: white; }2button:hover { background: #ccfbf1; }3button:active { transform: translateY(2px); }4button:focus { /* কিছু লেখা নেই */ }5button:focus-visible { outline: 3px solid blue; }

এবার নিজে পরীক্ষা করুন। প্রথমে মাউস দিয়ে দুটি বোতামে ক্লিক করুন, তারপর প্রিভিউর ভেতরে একবার ক্লিক করে Tab চাপতে থাকুন:

button, .pay { font: inherit; padding: 8px 14px; margin: 4px;
  border: 2px solid #0f766e; border-radius: 8px; background: #fff; }
.pay { display: inline-block; color: #0f766e; text-decoration: none; }

button:hover, .pay:hover { background: #ccfbf1; }
button:active, .pay:active { transform: translateY(2px); }

/* পুরোনো উপায় — মাউস-ক্লিকেও দাগ */
.a:focus { outline: 3px solid crimson; outline-offset: 2px; }

/* আধুনিক উপায় — শুধু যখন দরকার */
.b:focus-visible, .pay:focus-visible {
  outline: 3px solid #2563eb; outline-offset: 2px; }

/* ভেতরের কেউ focus পেলে পুরো ফর্ম */
.search { margin-top: 10px; padding: 8px; border: 2px dashed #94a3b8; }
.search:focus-within { border-color: #2563eb; background: #eff6ff; }

৩ · লিংকের অবস্থা — :link, :visited, :any-link আর গোপনীয়তা

লিংকের নিজস্ব দুটি অবস্থা: :link — যে লিংকে এখনো যাননি, আর :visited — যেটি আপনার ব্রাউজারের ইতিহাসে আছে। দুটি মিলিয়ে :any-link — href আছে এমন যেকোনো লিংক। খেয়াল করুন, href ছাড়া <a> কোনোটিই মানে না; সেটি আসলে লিংকই নয়, শুধু একটি জায়গা-ধরা ট্যাগ (পর্ব ৫)।

/* LVHA ক্রম — চারটির specificity সমান, তাই পরে লেখাটি জেতে */
a:link    { color: #1d4ed8; }
a:visited { color: #7c3aed; }
a:hover   { color: #0f766e; text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
a:active  { color: #b91c1c; }

ক্রমটা মনে রাখার কৌশল “LoVe HAte” — Link, Visited, Hover, Active. কারণ চারটির ওজন সমান (প্রতিটি একটি type আর একটি pseudo-class); a:hover-কে যদি a:visited-এর আগে লেখেন, তাহলে আগে দেখা লিংকে মাউস আনলে রং আর বদলাবে না — পরে লেখা :visited জিতে যাবে।

:visited-এ কেন প্রায় কিছুই করা যায় না? চেষ্টা করে দেখুন a:visited { font-size: 30px; } — কিছুই হবে না। ব্রাউজার :visited-এ শুধু রং-জাতীয় property মানে: color, background-color, border-color, outline-color, text-decoration-color আর SVG-র fill/stroke. তার ওপর JavaScript দিয়ে লিংকের রং জিজ্ঞেস করলে ব্রাউজার ইচ্ছা করে “না-দেখা” লিংকের রং বলে। কারণ — history sniffing: একসময় যেকোনো সাইট হাজারটা লিংক লুকিয়ে বসিয়ে মেপে দেখত কোনগুলো :visited, আর এভাবে জেনে যেত আপনি কোন ব্যাংক, কোন হাসপাতাল বা কোন সংবাদ সাইটে যান। পুরো গল্প ভাবনার প্রশ্ন ১-এ।

৪ · ফর্মের অবস্থা — :checked থেকে :user-invalid

পর্ব ৮ আর ৯-এ ফর্মের ঘর, required, pattern আর ব্রাউজারের নিজস্ব যাচাই দেখেছেন। প্রতিটি ঘরের অবস্থা ব্রাউজার জানে, আর CSS সেটি পড়তে পারে:

নিচের পাঠানোর ফর্মে সবগুলো একসাথে দেখুন। শুরুতেই খেয়াল করুন কোন ঘরের পটভূমি কমলা — এটাই :invalid-এর সমস্যা:

<style>
  label { display: block; margin: 8px 0 2px; }
  input { font: inherit; padding: 6px; border: 2px solid #94a3b8; border-radius: 6px; }
  input:required { border-left-width: 8px; }
  input:invalid { background: #fff7ed; }           /* পাতা খুলতেই! */
  input:user-invalid { border-color: #dc2626; }    /* কিছু করার পরে */
  input:user-valid { border-color: #16a34a; }
  input:placeholder-shown { font-style: italic; }
  input[readonly] { background: #f1f5f9; color: #475569; }
  :checked + span { font-weight: bold; color: #15803d; }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
</style>
<form>
  <label for="ph">মোবাইল নম্বর (আবশ্যক)</label>
  <input id="ph" name="phone" required pattern="01[3-9][0-9]{8}" placeholder="01XXXXXXXXX" inputmode="numeric">
  <label for="amt">পরিমাণ (টাকা)</label>
  <input id="amt" name="amount" type="number" min="10" max="25000" placeholder="যেমন 500">
  <label for="fee">চার্জ</label>
  <input id="fee" name="fee" value="পাঠানোর আগে দেখাবে" readonly>
  <p><label><input type="checkbox" name="save"> <span>নম্বরটি মনে রাখুন</span></label></p>
  <button>পাঠান</button>
  <button type="button" disabled>নির্ধারিত সময়ে পাঠান</button>
</form>

:disabled নিয়ে একটি বাস্তব কথা: disabled বোতাম Tab-এ আসে না, তাই screen reader ব্যবহারকারী অনেক সময় জানতেই পারেন না যে বোতামটি আছে, আর কেন চাপা যাচ্ছে না। অনেক দল তাই বোতাম সক্রিয় রেখে চাপলে ভুলগুলো দেখায়, অথবা aria-disabled="true" দিয়ে focus রেখে দেয় (তখন স্টাইল দিতে হয় [aria-disabled="true"] দিয়ে, কারণ :disabled মেলে না)। ফর্ম সাজানোর পুরো আলোচনা পর্ব ৪৩-এ।

৫ · গঠন দেখে বাছাই — :nth-child(an+b) আর বন্ধুরা

Structural pseudo-class element-কে চেনে DOM গাছে তার অবস্থান দিয়ে — ক্লাসে রোল নম্বরের মতো। সবচেয়ে সহজগুলো: :first-child (parent-এর প্রথম সন্তান), :last-child (শেষ সন্তান), :only-child (একমাত্র সন্তান)। আর সবচেয়ে শক্তিশালীটি :nth-child(), যার ভেতরে একটি সূত্র বসে: an+b.

নিয়মটা এরকম: ব্রাউজার n-এর জায়গায় ০, ১, ২, ৩… বসায়। প্রতিবার যে সংখ্যা আসে, সেই নম্বরের সন্তান মেলে। সংখ্যা ১-এর কম হলে বাদ (গোনা শুরু ১ থেকে)। 2n+1 = ১, ৩, ৫… (একই কথা odd), 2n = ২, ৪, ৬… (even). নিচে একটি সূত্র হাতে হিসাব করে দেখুন:

1<li>রহিম2<li>করিম3<li>সুমি4<li>রাজু5<li>মিতা6<li>জামাল7<li>নীলা8<li>তানিয়া9<li>সাকিব10<li>রুমা

আরও কয়েকটি দরকারি structural pseudo-class:

• :nth-child(an+b of S) — গোনার আগে শুধু S মানে এমন ভাই-বোনদের আলাদা করে। li.x:nth-child(odd) মানে “সবার মধ্যে বিজোড় অবস্থানে আছে এমন .x”; আর li:nth-child(odd of .x) মানে “শুধু .x-দের মধ্যে ১ম, ৩য়, ৫ম…”। লুকানো সারি বাদ দিয়ে zebra stripe বানাতে খুব কাজের: tr:nth-child(even of :not([hidden])). Safari বহু বছর আগেই এটি এনেছিল; Chrome আর Firefox ২০২৩ সালে যোগ দেয়, তাই এখন এটি Baseline Widely available.
• :nth-of-type(), :first-of-type, :last-of-type — একই ট্যাগের ভাই-বোনদের মধ্যে গোনে। p:nth-of-type(2) = দ্বিতীয় p, মাঝে যত span বা h2-ই থাকুক।
• :empty — একদম ফাঁকা element: কোনো সন্তান নেই, কোনো লেখা নেই। HTML comment চলে, কিন্তু একটি ফাঁকা জায়গা বা নতুন লাইন থাকলেও আজকের ব্রাউজারে আর :empty নয়।
• :root — ডকুমেন্টের সবচেয়ে ওপরের element, HTML-এ যা <html>. ওজন একটি class-এর সমান (html লিখলে type-এর সমান) — এজন্যই পর্ব ৩৩-এর CSS variable সাধারণত :root-এ রাখা হয়।

:root { --mark: #2563eb; }

li:nth-child(3n+2) { background: #fef3c7; }        /* ২, ৫, ৮ */
li.x:nth-child(odd) { outline: 2px dashed crimson; } /* বিজোড় অবস্থানের x */
li:nth-child(odd of .x) { color: var(--mark); font-weight: bold; }
li:last-child { border-bottom: 3px solid #16a34a; }

.box :first-child { font-style: italic; }
.box p:nth-of-type(2) { background: #dcfce7; }
.solo b:only-child { background: #e0e7ff; padding: 2px 6px; }

.note { min-height: 16px; border: 1px solid #94a3b8; margin: 6px 0; }
.note:empty {
  background: repeating-linear-gradient(45deg, #fecaca 0 6px, #fff 6px 12px); }

৬ · :target, :lang() আর :not(), :is(), :where()-এর পুনরালোচনা

:target সেই element-কে ধরে, যার id এখন URL-এর #-এর পরের অংশের সাথে মেলে (পর্ব ৫-এর fragment). প্রশ্নোত্তর পাতায় কোনো প্রশ্নের লিংকে চাপলে সেই উত্তরটি হাইলাইট করা, অথবা footnote-এ লাফ দিলে সেটি রাঙানো — দুটোই এর কাজ। :lang() ভাষা দেখে বাছে। এটি [lang] attribute selector-এর চেয়ে বুদ্ধিমান: :lang(bn) মেলে lang="bn" আর lang="bn-BD" দুটোতেই, আর ভাষা ওপর থেকে উত্তরাধিকারে আসে বলে নিজের গায়ে lang না থাকলেও ভেতরের element মেলে (পর্ব ১৪)।

<style>
  .faq { padding: 4px 12px; border-left: 4px solid #cbd5e1; margin: 8px 0; }
  .faq:target { border-left-color: #2563eb; background: #eff6ff; }
  .faq h3 { margin: 4px 0; font-size: 1.05em; }
  :lang(en) { font-style: italic; color: #7c3aed; }
  nav a:not(:last-child) { margin-right: 14px; }
</style>
<nav>
  <a href="#delivery">ডেলিভারি কবে?</a>
  <a href="#pay">কীভাবে দাম দেব?</a>
  <a href="#return">ফেরত দেওয়া যায়?</a>
</nav>
<section class="faq" id="delivery"><h3>ডেলিভারি কবে পাব?</h3>
  <p>ঢাকার ভেতরে সাধারণত দুই থেকে তিন দিনে।</p></section>
<section class="faq" id="pay"><h3>কীভাবে দাম দেব?</h3>
  <p>মোবাইল ওয়ালেটে, অথবা <span lang="en">Cash on Delivery</span>-তে।</p></section>
<section class="faq" id="return"><h3>ফেরত দেওয়া যায়?</h3>
  <p>হ্যাঁ, সাত দিনের মধ্যে, প্যাকেট না খুলে।</p></section>

অনেকে :target দিয়ে JavaScript ছাড়াই ট্যাব বানান (.panel { display: none }, .panel:target { display: block })। দেখতে চলে, কিন্তু প্রতিটি ক্লিক ব্রাউজারের ইতিহাসে নতুন ধাপ যোগ করে, Back চাপলে ট্যাব বদলায়, আর screen reader ট্যাবের ভূমিকা বোঝে না। প্রশ্নোত্তরের জন্য পর্ব ১১-এর <details> ভালো সমাধান।

পর্ব ১৭ আর ১৮-এ দেখা তিনটি “তালিকা নেওয়া” pseudo-class মনে করে নিন — এরা এই পর্বের বাকিদের সাথে মিলে আরও কাজের হয়:

৭ · :has() — অবশেষে “parent selector”

বহু বছর ধরে CSS শুধু নিচের দিকে আর সামনের দিকে দেখতে পারত। “যে কার্ডের ভেতরে ছবি আছে, সেই কার্ডটি পাশাপাশি সাজাও” — এই সহজ কাজের জন্য JavaScript লিখে কার্ডে class বসাতে হতো। :has() সেই দরজা খুলেছে। .card:has(img) মানে “এমন .card, যার ভেতরে একটি img আছে” — স্টাইল পায় কার্ড, ছবি নয়।

বন্ধনীর ভেতরে থাকে relative selector — যার শুরুটা ধরা হয় বাইরের element থেকে। :has(img) = যেকোনো গভীরতায় img; :has(> img) = সরাসরি সন্তান img; আর h2:has(+ p) = যে h2-এর ঠিক পরে একটি p আছে — অর্থাৎ আগের ভাই-বোন বাছাই, যা আগে অসম্ভব ছিল। ব্রাউজার ভেতরে কীভাবে মেলায়, দেখুন:

1<section class="shop">2  <article class="card">3    <img alt="ইলিশ">4    <h3>ইলিশ</h3>5  <article class="card">6    <h3>মধু</h3>7    <p>৳ ৮৫০</p>

বাস্তবে সবচেয়ে বেশি কাজে লাগে এমন চারটি নকশা নিচের এডিটরে। শেষেরটির নাম quantity query — “কতগুলো সন্তান আছে” দেখে সাজ বদলানো। :has(> li:nth-child(5)) সত্য মানে পঞ্চম li আছে, অর্থাৎ কমপক্ষে ৫টি। (২০১৫ সালের দিকে Heydon Pickering এটি :nth-last-child আর ~ জুড়ে করার কৌশল জনপ্রিয় করেন, কিন্তু তখন শুধু li-গুলোকেই সাজানো যেত — তালিকাকে নয়।)

.card { border: 2px solid #cbd5e1; border-radius: 10px; padding: 8px; margin: 6px 0; }
.card h3, .card p { margin: 0; }

/* ১. ছবি আছে এমন কার্ড — পাশাপাশি সাজাও */
.card:has(img) { display: flex; gap: 10px; align-items: center; border-color: #2563eb; }
/* ছবি নেই এমন কার্ড */
.card:not(:has(img)) { border-style: dashed; background: #f8fafc; }

/* ২. কোনো ঘর ভুল হলে পুরো ফর্ম লাল */
.f:has(:user-invalid) { outline: 3px solid #dc2626; outline-offset: 4px; }

/* ৩. টিক দেওয়া checkbox-এর label */
label:has(:checked) { font-weight: bold; color: #15803d; }

/* ৪. quantity query — ৫টি বা বেশি li থাকলে */
.tags:has(> li:nth-child(5)) { columns: 2; font-size: 0.85em; color: #7c3aed; }

সাপোর্ট ও সাবধানতা: Safari আর Chrome ২০২২ সালে :has() আনে, Firefox যোগ দেয় ২০২৩ সালের ডিসেম্বরে — তখন থেকে Baseline, আর এখন Widely available. খুব পুরোনো ব্রাউজারের জন্য @supports selector(:has(*)) { … } দিয়ে নিয়মটি ঘিরে রাখতে পারেন (পর্ব ৪৮), যাতে সেখানে সাধারণ নকশাটি থাকে। দুটি নিয়ম মনে রাখুন: :has()-এর ভেতরে আরেকটি :has() চলে না, আর ভেতরে pseudo-element (::before) চলে না। আর :has()-কে সবসময় কোনো element-এর সাথে বাঁধুন — .card:has(…); একা :has(…) বা body:has(…) পুরো পাতার প্রতিটি পরিবর্তনে বেশি যাচাইয়ের কারণ হতে পারে।

৮ · ::before আর ::after — CSS দিয়ে বানানো বাক্স

::before আর ::after element-এর ভেতরে, একদম শুরুতে আর একদম শেষে একটি নতুন বাক্স তৈরি করে — element-এর আগে-পরে নয়, এটা অনেকে ভুল বোঝেন। বাক্স তৈরি হয় শুধু তখন, যখন content property দেওয়া থাকে; শুধু সাজের জন্য হলে content: "". এর নাম generated content. বাক্সটি DOM-এ নেই — JavaScript খুঁজে পায় না, মাউসে টেনে লেখা বাছা যায় না, কপি করলে আসে না — কিন্তু render tree-এ আছে, তাই দেখা যায়। img, input-এর মতো replaced element-এ সাধারণত কাজ করে না, কারণ তাদের ভেতরের অংশ ব্রাউজার নিজে আঁকে।

অ্যাক্সেসিবিলিটির বড় কথা: অনেকে ভাবেন CSS-এর লেখা screen reader-এর কাছে অদৃশ্য। ভুল। accessible name হিসাবের নিয়মে ::before/::after-এর লেখাও যোগ হয়, তাই বেশিরভাগ screen reader “★” পেলে “black star” পড়ে, “→” পেলে “right arrow”. সমাধান: content-এ স্ল্যাশ দিয়ে বিকল্প লেখা (alt text) দেওয়া যায় — content: "★" / ""; মানে চোখে তারা, screen reader-এ কিছু না। এই লেখার ধরন ২০২৪ সাল থেকে Baseline Newly available; পুরোনো ব্রাউজার পুরো ঘোষণাটি বাদ দেয়, তাই আগে স্ল্যাশ ছাড়া একটি লাইন লিখে রাখুন (fallback).

/* আগে fallback, তারপর alt text-সহ — "" মানে screen reader চুপ */
.req::after { content: " *"; content: " *" / ""; color: #dc2626; }
.ext::after { content: " ↗"; content: " ↗" / " (বাইরের সাইট)"; }

.q { quotes: "“" "”"; font-size: 1.2em; }
.q::before { content: open-quote; color: #94a3b8; }
.q::after  { content: close-quote; color: #94a3b8; }

/* শুধু সাজ — content খালি, বাক্সটি absolute */
.card { position: relative; padding: 12px 12px 12px 24px;
  border: 2px solid #cbd5e1; border-radius: 10px; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: #16a34a; border-radius: 8px 0 0 8px; }

/* ভুল ব্যবহার: আসল তথ্য CSS-এ রাখা */
.price::before { content: "দাম: ৳ "; }

তারকাটির alt text কেন খালি? কারণ ঘরে required আছে, screen reader নিজেই “required” বলবে — “star” বললে শুধু বাড়তি শব্দ। বাইরের লিংকের তীরের alt text কিন্তু তথ্য বহন করে: “(বাইরের সাইট)”. প্রতিটি চিহ্নের জন্য একটি প্রশ্ন করুন — “চোখে না দেখলে কি এই তথ্য হারাত?” হ্যাঁ হলে alt text দিন (বা তথ্যটি HTML-এ লিখুন), না হলে খালি রাখুন। ::before/::after-এর আরও কাজ: counter() দিয়ে স্বয়ংক্রিয় নম্বর, attr(data-x) দিয়ে attribute-এর মান দেখানো, tooltip-এর ছোট ত্রিভুজ, আর পর্ব ৩৮-৩৯-এর অ্যানিমেশনের বাড়তি স্তর।

৯ · লেখা আর ফর্মের অংশ — ::first-letter থেকে ::file-selector-button

বাকি pseudo-element-গুলো এমন অংশ ধরে, যা ব্রাউজার নিজে তৈরি করে বা আঁকে:

• ::first-letter — প্রথম অক্ষর; পত্রিকার মতো বড় drop cap বানাতে। float, font-size, margin চলে। নতুন initial-letter property সরাসরি “তিন লাইন জুড়ে বড় অক্ষর” বানায়, কিন্তু Firefox-এ এখনো নেই — not yet Baseline.
• ::first-line — স্ক্রিনে প্রথম যে লাইনটি দেখা যাচ্ছে। জানালা ছোট-বড় করলে লাইনটির শেষ বদলায়, তবু নিয়ম ঠিক থাকে। শুধু লেখা-সংক্রান্ত property (রং, font, letter-spacing) চলে।
• ::marker — তালিকার বুলেট বা নম্বর। color, font-* আর content-এর মতো কয়েকটি property-ই শুধু চলে, আর ব্রাউজারভেদে সমর্থন কিছুটা আলাদা। নম্বরের ধরন বদলাতে list-style-type: bengali (পর্ব ৭-এর counter style).
• ::placeholder — ফাঁকা ঘরের ইঙ্গিত-লেখা। হালকা ধূসর অনেক সময় contrast-এ ফেল করে; আর placeholder কখনো label-এর বদলি নয় (পর্ব ৮)।
• ::selection — মাউসে টেনে বাছাই করা অংশ। শুধু color, background-color, text-decoration, text-shadow-এর মতো কয়েকটি চলে।
• ::backdrop — পর্ব ১১-এ দেখেছেন: modal <dialog>, popover বা fullscreen element-এর ঠিক পেছনের, পুরো পর্দা-জোড়া স্তর (top layer-এ থাকে)। যেমন dialog::backdrop { background: rgb(0 0 0 / 0.5); }.
• ::file-selector-button — <input type="file">-এর “Choose file” বোতাম। আগে এটি সাজানোর কোনো মানসম্মত উপায় ছিল না, ঘরটি লুকিয়ে নকল বোতাম বানাতে হতো; এখন Baseline Widely available.

.en { display: flow-root; }   /* float যেন পরের অনুচ্ছেদে না ঢোকে */
.en::first-letter { float: left; font-size: 3.2em; line-height: 1;
  margin: 2px 6px 0 0; color: #b91c1c; }
.en::first-line { font-variant: small-caps; }

/* বাংলায়: যুক্তাক্ষর আর কার-চিহ্ন কী হয়? */
.bn::first-letter { font-size: 2em; color: #b91c1c; }

.steps { list-style-type: bengali; }
.steps li::marker { color: #2563eb; font-weight: bold; }

input::placeholder { color: #6b7280; }   /* যথেষ্ট গাঢ় */
::selection { background: #fde68a; color: #1e293b; }

input::file-selector-button { font: inherit; border: 0; border-radius: 6px;
  padding: 6px 12px; background: #0f766e; color: #fff; cursor: pointer; }

১০ · AI-এর যুগে — pseudo-class লেখার কাজ AI-কে দিলে

“বোতামে সুন্দর hover দাও”, “required ঘরে লাল তারা দাও” — AI মুহূর্তে CSS দেবে, আর দেখতেও ঠিক লাগবে। কিন্তু pseudo-class আর pseudo-element-এর ভুলগুলো প্রায়ই চোখে ধরা পড়ে না: মাউসে সব ঠিক, ভুলটা কি-বোর্ডে, screen reader-এ বা ফোনে। AI অনেক পুরোনো টিউটোরিয়াল থেকে শিখেছে, তাই সেই যুগের অভ্যাসও ফিরিয়ে আনে।

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

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

• মাউস ছেড়ে শুধু Tab, Shift+Tab, Enter আর Space দিয়ে পুরো পাতা চালিয়েছি — প্রতিটি লিংক-বোতামে focus-এর দাগ চোখে পড়েছে
• DevTools-এর Elements প্যানেলে :hov বোতাম চেপে :hover, :focus-visible, :active অবস্থা জোর করে চালু করে প্রতিটির স্টাইল দেখেছি
• DevTools-এর Accessibility অংশে বা Lighthouse-এ দেখেছি — ::before/::after-এর লেখা accessible name-এ বাড়তি শব্দ যোগ করছে না; placeholder আর focus-দাগের contrast যথেষ্ট
• ফোনে (বা DevTools-এর device toolbar-এ) দেখেছি, শুধু-hover-এ লুকানো কিছু নেই
• নতুন selector বা লেখার ধরন (যেমন content: "x" / "") MDN আর Can I use-এ মিলিয়ে Baseline অবস্থা জেনেছি; W3C CSS Validator-এ বানান-ভুল নেই