আজ পড়ন্ত বিকেলে ইউটিউব থেকে দেখে Pseudo Class এবং Pseudo Elements প্র্যাকটিস করছিলাম। সেখান থেকে যতটুকু বুঝতে পেরেছি চলুন সেগুলো দেখে আসি।
Pseudo Class:
Pseudo Class হচ্ছে কিছু পূর্ব- নির্ধারিত ক্লাস। এগুলো ছদ্মবেশে লুকিয়ে থাকে। যখন প্রয়োজন আমরা কল করে ব্যবহার করতে পারি। যেমন, Hover, Visited ইত্যাদি।
অর্থাৎ, মাউসের ওপর নিয়ন্ত্রন নেওয়ার জন্য Pseudo Class কাজ করে। কোথাও কার্সর নিলে সেটি কি রিয়েক্ট করবে, কোনো লিংক একবার ভিজিট করা হয়ে গেলে সেটিকে আলাদা কালার করতেও এই ধরনের ক্লাস ব্যবহার করা হয়। যেমন, .parent-class:hover {}.
Pseudo Class সাধারনত ২ প্রকার। নীচে এগুলোকে সংক্ষেপে তুলে ধরছি।
১. ইন্টারঅ্যাকশন ভিত্তিক Pseudo Class:
→ :hover – মাউস কার্সর নিয়ে গেলে স্টাইল পরিবর্তন করে।
→ :focus – যখন ইনপুট ফিল্ড বা এলিমেন্ট ফোকাস হয় তখন স্টাইল পরিবর্তন করে।
→ :active – যখন একটি এলিমেন্টে ক্লিক করা হয় তখন স্টাইল পরিবর্তন করে।
এই ৩টির মধ্যে এখন পর্যন্ত আমরা হোভারের ব্যবহারই সবচেয়ে বেশি করেছি। তাই না?
২. স্ট্রাকচার ভিত্তিক Pseudo Class:
→ :first-child – কোনো এলিমেন্টের প্রথম চাইল্ডের উপর স্টাইল প্রয়োগ করে।
→ :last-child – কোনো এলিমেন্টের শেষ চাইল্ডের উপর স্টাইল প্রয়োগ করে।
→ :nth-child(n) – নির্দিষ্ট সংখ্যার চাইল্ড নির্বাচন করে। এটি দেখে অনেকদিন পর গণিতের ধারার অংকের কথা মনে পড়ছে। আপনার কি সেইম?
এখানে n এর মান পরিবর্তন করে নির্দিষ্ট আইটেম সিলেক্ট করা হয়। যেমন, (2n+1) ব্যবহার করে বিজোড় আইটেম, (2n+2) ব্যবহার করে জোড় আইটেম। প্র্যাকটিস করতে থাকলে বাকীগুলো ক্লিয়ার হয়ে যাবে। চলুন এবার Pseudo Elements সমন্ধে জেনে নিই।
Pseudo Elements:
Pseudo Elements হলো HTML-এর নির্দিষ্ট অংশকে স্টাইল করার জন্য ব্যবহৃত ফিচার। কোনো ক্লাসের সবগুলো ইলিমেন্টকে না নিয়ে স্পেসিফিক অংশকে আলাদা ভাবে সিলেক্ট করা হয় এটির মাধ্যমে। নীচে এর কিছু উদাহরন যুক্ত করে দিচ্ছি।
→ ::before – একটি এলিমেন্টের কন্টেন্টের আগে কন্টেন্ট যোগ করতে ব্যবহৃত হয়।
→ ::after – একটি এলিমেন্টের কন্টেন্টের পরে কন্টেন্ট যোগ করতে ব্যবহৃত হয়। (এটি আজকের প্রজেক্টে ব্যবহার করেছি )
→ ::first-letter – একটি প্যারাগ্রাফের প্রথম অক্ষরের স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। বিভিন্ন ম্যাগাজিন টাইপের সাইটগুলোতে প্রথম অক্ষর স্টাইলিস ভাবে দেখানো হয়। সেখাটি এটি ব্যবহার করা হয়।
→ ::first-line – একটি প্যারাগ্রাফের প্রথম লাইনের জন্য স্টাইল প্রয়োগ করা হয়।
→ ::selection – ইউজার যখন কোনো টেক্সট সিলেক্ট করে তখন সেই অংশের স্টাইল পরিবর্তন করে। যেকোনো সাইটে টেক্সট সিলেক্ট করার স্টাইলটা একই। তাই এর মাধ্যমে নিজের সাইটকে ডিফারেন্ট ভাবে তুলে ধরা যায়।
এখন আমরা এই দুটি বিষয় ইমপ্লিমেন্ট করে একটি ছোট প্রজেক্ট করবো। এখানে থিম হলো Unsplash বা অন্যান্য ইমেজ ডাওনলোডার সাইটে ইমেজের ওপর মাউসের কার্সর নিলে সেটি কিছুটা ব্লারি হয়ে যায়। এটা হোভার এর মাধ্যমে করা হয়। আমরাও এটি করতে চাই।
এই ১ম ছবিটি Hover করার আগের ।
তারপর মাউস দিয়ে হোভার করার পরে এরকম হয়।
Pseudo Class এবং Pseudo Elements মাঝে মাঝে আমিও গুলিয়ে ফেলি। তাই এটাকে আরেকভাবে মনে রাখা যায়।
CSS একটি ক্লাসের সাথে একটি “:” কোলন যুক্ত করে ব্যবহার করলে সেটি Pseudo Class. আর যদি দুইবার কোলন “::” ব্যবহার করা হয় তবে সেটি Pseudo Elements.
আশাকরি সহজ লেগেছে।
[এই প্রজেক্টের কোডগুলো কোডপেন থেকে দেখতে পারেন]