🎨 CSS এর নতুন pseudo selectors :has(), :is(), :where() নিয়ে কিছু কথা

[tanim_mahbub]

যারা আমার মত আফসোস করতেন যে, CSS এ ডিরেক্ট চাইল্ড কম্বিনেটর > এর মত কোন ডিরেক্ট প্যারেন্ট কম্বিনেটর নাই, তাদের জন্য সুখবর! সরাসরি এই চিহ্নটি < ব্যবহৃত না হলেও আমরা এখন ‘চাইল্ডের উপর ভিত্তি করে প্যারেন্ট সিলেক্ট’ করতে পারি :has() এর মাধ্যমে। আজকের আলোচনার একটি বড় অংশ হতে যাচ্ছে এই :has() সিলেক্টর।

[১] উপরের মেন্যু-আইটেমগুলোতে যে hover ইফেক্ট আছে, সেটা করতে গেলে আগে জাভাস্ক্রিপ্টের প্রয়োজন হত, এখন এটা CSS দিয়েই করা যায়, Thanks to the new :has() selector.

:has() selector যেভাবে কাজ করে, তার জন্য অনেকে এর নাম দিয়েছে Parent Selector, বা Contextual Selector, কারন এটি তার কন্টেন্টের উপর ভিত্তি করে কাজ করে, যেমন- ‌‌

menu:has(a:hover) a:not(:hover) {
    opacity: .3;
}

এর বাংলা তরজমা হলো- “যদি menu ট্যাগের মধ্যে থাকা কোন a ট্যাগকে hover করা হয়, তাহলে hoverd a ট্যাগটি ছাড়া বাকি সব a ট্যাগের অপাসিটি .3 করে দাও।”

উপরের উদাহরণটি :has() selector এর একদমই বেসিক একটি কাজ, এই সিলেক্টরের অনেক সুন্দর সুন্দর ডেমো, স্নিপেট, কম্পোন্যান্ট ডেভেলপার ও কন্টেন্ট ক্রিয়েটররা প্রতিনিয়ত পাবলিশ করে যাচ্ছে। সার্চ করলেই পাবেন। ক্যাভিন পল তার এই ভিডিওতে উপরে দেখানো বেসিক উদাহরেণটির মত একটি সুন্দর কাজ করে দেখিয়েছে। বিষয়টি আরও ভালভাবে বুঝতে ভিডিওটি দেখতে পারেন, এবং আপনার যদি ইংরেজিতে সমস্যা না থাকে বা ইংরেজি টিউটরিয়াল দেখে অভ্যস্ত হন, তাহলে তার চ্যানেলে কিছু সময় দিতে পারেন, কাজে লাগবে আশা করি।

---

[২] এই সিলেক্টরের সম্ভাবনা অনেক, এটা দিয়ে অনেক অনেক ধরনের কাজ করার সুযোগ আছে। CSS এর আরেকটি বহুল ব্যবহৃত কম্বিনেটর হলো নেক্সট চাইল্ড কম্বিনেটর `+`, যা একটি নির্দিষ্ট এলিমেন্টের ইমিডিয়েট পরবর্তী এলিমেন্টকে সিলেক্ট করে। সাধারণত কোন কার্ড লিস্ট বা লিস্ট আইটেমগুলোর মাঝে স্পেস দেয়ার জন্য আমরা এটি ব্যবহার করি, যেন প্রথম আইটেম থেকে সেই স্পেস রিমুভ করার জন্য আলাদাভাবে CSS লেখা না লাগে।

.blog-card + .blog-card {margin-top: 30px}

ul > li + li {
  margin-top: 15px;
  border-top: 1px solid #f44;
}

.the-content > p + p {margin-top: 15px}

ইত্যাদি। এ ছাড়াও এর অনেক কাজ আছে। যাক, বলছিলাম আমাদের আফসোসের কথা যে, নেক্সট চাইল্ড কম্বিনেটর + এর মত CSS এর প্রিভিয়াস চাইল্ড কম্বিনেটর নাই। জাভাস্ক্রিপ্টের দুইটাই আছে- nextElementSibling এবং previousElementSibling আমি অবশ্য এর জন্য মাইনাস সাইন - কে প্রিভিয়াস চাইল্ড কম্বিনেটর করার দাবি জানাচ্ছি না, কারন এই সমস্যার সমাধানও :has() সিলেক্টর করে দিয়েছে। উপরের উদাহরণে তেমনই একটি বিষয় দেখানো হয়েছে। আপনার hover করা এলিমেন্টের পাশাপাশি তার আগে-পরের এলিমেন্টগুলোকেও এখন ইফেক্ট দেয়া যাবে এভাবে।

বিষয়টি আরও ভালভাবে বুঝতে এই ভিডিওটি দেখতে পারেন। CSS এর অতি প্রয়োজনীয় এবং মজার মজার ব্যবহার দেখানোর পাশাপাশি অনেক গুরুত্বপূর্ণ কম্পোন্যান্ট নিয়েও ভিডিও পাবেন এই চ্যানেলে, এবং এটিও ইংরেজি ভাষার।

---

[৩] এই উদাহরণে জাভাস্ক্রিপ্ট দিয়ে শুধু select ট্যাগের value -কে লোকাল স্টোরেজে রাখা হয়েছে, যেন কোন একটি ভ্যালু সিলেক্ট করার পর যদি পেজটি ক্লোজ করে দেয়া হয় তাহলে ঐ ভ্যালুটি হারিয়ে না যায়, পরবর্তীতে যদি আবার পেজটি ওপেন করা হয় তাহলে সেই ভ্যালুটিই যেন সিলেক্ট অবস্থায় থাকে যেটা লাস্ট টাইম সিলেক্ট করা হয়েছিল। যারা থিম-অপশন নিয়ে কাজ করেন তাদের জন্য খুবই বেসিক একটা বিষয়, এই উদাহরণের আলোচ্য বিষয়ের একটু বাইরে এটা, তাই শুরুতেই বলে দিলাম।

এই উদাহরণে কালার-থিম চেঞ্জ করার পুরো কাজটা করা হয়েছে :has() সিলেক্টর দিয়ে, থিম চেঞ্জ করার এই কাজগুলো আগে শুধুই জাভাস্ক্রিপ্ট দিয়ে করা হত। এখন :has() সিলেক্টর দিয়ে CSS মধ্যেও করতে পারবেন। তবে লোকাল স্টোরেজে ভ্যালু সেট-গেট করার কাজ অবশ্যই জাভাস্ক্রিপ্ট দিয়ে করতে হবে।

বিষয়টি আরও ভালভাবে বুঝতে ক্যাভিন পলের এই ভিডিওটি দেখতে পারেন। টাইমস্ট্যাম্প করা আছে যদিও, তারপরও বলে দিচ্ছি, ভিডিওর প্রথম টপিকই হলো :has() ব্যবহার করে এই থিম চেঞ্জ করার বিষয়টি। তারপর :has() এর আরো কিছু ব্যবহার দেখানো হয়েছে।

---

[৪] :has() নিয়ে আজকের শেষ উদাহরণ এটি। দেখতেই পাচ্ছেন এটি একটি ট্যাব, এবং কোন জাভাস্ক্রিপ্ট ব্যবহার করা হয়নি। তবে এই ট্যাব শুধুই :has() সিলেক্টরের কাজ না, এর জন্য আরেকটি গুরুত্বপূর্ণ সিলেক্টর হচ্ছে :target, এই দুটিই হলো এর মূল শক্তি।

কয়েক বছর আগে যখন প্রথম :target সিলেক্টরের সাথে পরিচয় হয়, তখন এর আইডিয়াটা মাথায় আসে। সমস্যা ছিল কয়েকটা, প্রথম ট্যাবটা কিভাবে শো করাব, কারন :target কাজ করবে ক্লিক করার পর। আরেকটা সমস্যা হলো ট্যাবের বাটনগুলোকে :active State দেয়া। :has() আসার পর এই দুইটা সমস্যার সমাধান হয়।

---

[৫] :is() এবং :where() নিয়ে কথা বলার আগে তাদের প্র্যাক্টক্যাল ইউজ দেখলে বুঝতে সহজ হবে।

/* Old way */
.hero-conetnt h2,
.hero-conetnt p,
.hero-conetnt a {/* code */}

/* New way */
.hero-conetnt :is(h2, p, a) {/* code */}
.hero-conetnt :where(h2, p, a) {/* code */}

এখানে সহজে বোঝানোর জন্য তিন লাইনকে এক লাইনে আনা হয়েছে। বাস্তবে আমরা এ ধরনের যে সমস্যা বা বিরক্তিকর রিপিটেশানের মুখোমুখি হই, সেগুলো আরও অনেক লাইনের হয়ে থাকে। একটা ছোট্ট উদাহরণ দেখতে পারেন।

আরেকটি বিষয় হলো, সাধারণ পদ্ধতিতে (কমা ব্যবহার করে) যখন আপনি কয়েকটি সিলেক্টর নিয়ে একসাথে কাজ করবেন, তখন যদি কোন একটা সিলেক্টরের মধ্যে ভুল হয় তাহলে সবগুলো সিলেক্টর কাজ করা বন্ধ করে দেবে। শুধু মাত্র একটা সিলেক্টরে ভুল থাকার কারনে।

কিন্তু :is() এবং :where() দিয়ে যখন আপনি কাজ করবেন, তখন যদি কোন সিলেক্টরে ভুল হয়, তাহলে যে সিলেক্টরে ভুল হয়েছে, শুধু সেটাই কাজ করা বন্ধ করবে, বাকিগুলো ঠিকঠাক কাজ করবে।

:is() এবং :where() এর ব্যবহার এবং কাজ একই, শুধু Specificity এর পার্থক্য। আমরা জানি CSS এর মধ্যে সবার শেষ লাইনের প্রায়োরিটি বেশি হয়ে থাকে, অর্থাৎ-

• কোন একটি এলিমেন্টের জন্য আপনি ১৮ নাম্বার লাইনে একটা background কালার দিলেন,
• একটু পর ২১ নাম্বার লাইনে ঐ একই এলিমেন্টকে অন্য আরেকটা background কালার দিলেন,

তাহলে ২১ নাম্বার লাইনে দেয়া কালারটিই এপ্লাই হবে, এটাই নিয়ম। কিন্তু …

যদি ১৮ নাম্বার লাইনের Specificity বেশি থাকে, তাহলে আর ২১ নাম্বার লাইনের কালার নেবে না। নিচের উদাহারণটি দেখলে বিষয়টি পরিষ্কার হবে আশা করি।

:is() এবং :where() এর পার্থক্য হলো এখানেই। :is() এর Specificity বেশি, আর :where() এর Specificity হল ০, তাই Specificity এর কোন ঝামেলা ছাড়া ব্যবহার করতে চাইলে :where() ব্যবহার করুন, আর যদি Specificity বেশি রাখতে চান তাহলে :is()

---

আজকে এ পর্যন্তই, ভাল থাকবেন সবাই, হ্যাপি কোডিং

[ArafatDinajpur]

দারুণ লিখেছেন ভাই, ধন্যবাদ

[zahidbenu]

বাহ! অনেক কিছু জানলাম, শিখলাম।

[md_ashraf_Uddin]

দারুন লিখেছেন ভাই। আগেও জানতাম বাট ইউজ করা হতো না। এখন আগ্রহ হলো

[tanim_mahbub]

মন্তব্যের জন্য ধন্যবাাদ ভাই

[tanim_mahbub]

জেনে খুশি হলাম ভাই, এটাই আমাদের রিওয়ার্ড, মন্তব্যের জন্য ধন্যবাদ।

[tanim_mahbub]

শুরু করে দিতে পারেন ভাই, কোড অনেক কমিয়ে দেয় এবং এফিশিয়েন্টও করে।

[RaheelArfeen]

Thank you very much. I have learned a new thing from you, and it’s so interesting.

[tanim_mahbub]

Glad to know that brother, keep on going