যখন আপনি একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি একটি এলিমেন্টে স্টাইল প্রয়োগ করতে চাইতে পারেন যখন সেটি ব্যবহারকারী দ্বারা একটিভেট (activate) হচ্ছে। উদাহরণস্বরূপ, আপনি একটি বাটন বা লিংকের রঙ পরিবর্তন করতে চাইতে পারেন যখন ব্যবহারকারী বাটন বা লিংকটিতে ক্লিক করবে।
এখানেই CSS :active সিউডো-ক্লাস (pseudo-class) কাজে আসে। :active সিউডো-ক্লাস আপনাকে उन এলিমেন্টগুলিকে সিলেক্ট করতে দেয় যেগুলি ব্যবহারকারী দ্বারা একটিভেট হয়েছে, যাতে আপনি সেগুলিতে স্টাইল প্রয়োগ করতে পারেন।
এই টিউটোরিয়ালে উদাহরণসহ CSS সিউডো-ক্লাসের বেসিক এবং আপনি আপনার কোডে :active সিউডো-ক্লাস কীভাবে ব্যবহার করতে পারেন তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি :active সিউডো-ক্লাস ব্যবহারে এক্সপার্ট হবেন।
CSS সিউডো-ক্লাস (Pseudo-classes)
CSS-এ, সিলেক্টর ব্যবহার করা হয় যেসব এলিমেন্টে একটি স্টাইল বা স্টাইল সেট প্রযোজ্য করা উচিত সেগুলি সিলেক্ট করার জন্য। উদাহরণস্বরূপ, একটি সিলেক্টর একটি ওয়েব পেজের সকল <h1> বা <select> ট্যাগ সিলেক্ট করতে পারে, যাতে সেগুলিতে স্টাইল সেট প্রযোজ্য করা যায়।
প্রায়শই, যখন আপনি একটি ওয়েবসাইট স্টাইল করছেন, তখন আপনি একটি স্টাইল শুধু তখন প্রযোজ্য করতে চান যখন একটি এলিমেন্ট একটি বিশেষ স্টেটে داخل হয়, যেমন ব্যবহারকারী দ্বারা ক্লিক করা বা মাউস ওভার করা। এখানেই সিউডো-ক্লাস (pseudo-classes) কাজে আসে।
সিউডো-ক্লাস হলো একটি সিলেক্টরের সাথে যোগ করা কীওয়ার্ড যা আপনাকে একটি নির্দিষ্ট এলিমেন্ট সিলেক্ট করতে দেয় যখন সেই এলিমেন্ট একটি নির্দিষ্ট স্টেটে থাকে।
এই টিউটোরিয়ালের জন্য, আমরা :active সিউডো-ক্লাসের ওপর ফোকাস করব।
CSS :active সিউডো-ক্লাস
:active সিউডো-ক্লাস আপনাকে একটি এলিমেন্ট সিলেক্ট করতে দেয় যা ব্যবহারকারী দ্বারা একটিভেট হচ্ছে। CSS পরিভাষায়, "একটিভেট করা" মানে যখন একজন ব্যবহারকারী মাউস বাটন টিপে এলিমেন্টে ক্লিক করে।
:active সিউডো-ক্লাস সাধারণত <a> এবং <button> এলিমেন্টের সাথে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি :active সিউডো-ক্লাস ব্যবহার করতে পারেন একটি লিংকের রঙ লাল করতে যখন সেটি ক্লিক করা হয়, বা একটি বাটনের ব্যাকগ্রাউন্ড রঙ হালকা নীল করতে যখন সেটি ক্লিক করা হয়।
একবার ব্যবহারকারী একটি এলিমেন্টে ক্লিক করা বন্ধ করলে, সেই এলিমেন্ট আর "একটিভেটেড" থাকে না। সুতরাং, ব্যবহারকারী এলিমেন্টে ক্লিক করা বন্ধ করলে সেই এলিমেন্ট :active সিলেক্টর দ্বারা সিলেক্ট হবে না।
CSS :active উদাহরণ (Examples)
চলুন দুটি উদাহরণের মাধ্যমে আপনি কীভাবে :active সিউডো-ক্লাস ব্যবহার করতে পারেন তা ব্যাখ্যা করি।
এক্টিভ লিংকস (Active Links)
মান লইজिए আমরা একটি স্থানীয় কার্ড গেম ক্লাব, "Wizards of the Boards" এর জন্য একটি ওয়েবসাইট ডিজাইন করছি। আমাদের কাজ হচ্ছে একটি "About" পেজ তৈরি করা যাতে ক্লাবের সদস্যদের দ্বারা খেলা কার্ড গেমের তালিকায় একটি লিংক থাকে।
ডিফল্টভাবে, এই লিংকটি হালকা নীল রঙে দেখাবে। যখন এই লিংকটি ক্লিক করা হবে, এর টেক্সট রঙ نارঙি (orange) এ পরিবর্তন হবে। এই কাজ সম্পন্ন করতে আমরা :active সিউডো-ক্লাস ব্যবহার করতে পারি। এখানে যে কোডটি আমরা ব্যবহার করব লিংক ক্লিক করার সময় টেক্সট রঙ পরিবর্তন করার জন্য:
<html>
<p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games. To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p>
</html>
<style>
a { color: lightblue; }
a:active { color: orange; }
</style>আমাদের কোডের আউটপুট: 
কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের HTML ফাইলে, আমরা <p> ট্যাগ ব্যবহার করে একটি প্যারাগ্রাফ টেক্সট সংজ্ঞায়িত করেছি যা Wizards of the Boards কার্ড গেম ক্লাবের ইতিহাস বর্ণনা করে। আমাদের <p> ট্যাগে, আমরা একটি <a> ট্যাগ নির্দিষ্ট করেছি যা "games.html" পেজে লিংক করে, এবং এটি ট্রিগার হয় যখন ব্যবহারকারী "click here" টেক্সটে ক্লিক করে।
আমাদের CSS কোডে, আমরা দুটি স্টাইল রুল নির্দিষ্ট করেছি। প্রথমে, আমরা একটি রুল নির্দিষ্ট করেছি যা সকল <a> ট্যাগের টেক্সট রঙ হালকা নীল সেট করে। তারপর, আমরা :active সিলেক্টর ব্যবহার করে একটি রুল নির্দিষ্ট করেছি যা সকল এক্টিভ <a> ট্যাগের টেক্সট রঙ نارঙি সেট করে। অন্য কথায়, এই রুল একটি লিংকের রঙ পরিবর্তন করে যখন একজন ব্যবহারকারী সেটিতে ক্লিক করছে।
এক্টিভ বাটনস (Active Buttons)
আমরা Wizards of the Boards কার্ড গেম ক্লাবের জন্য একটি ফর্মের ওপর কাজ করছি যা লোকদের ক্লাবে তাদের আগ্রহ সাবমিট করতে দেয়।
আমাদের ফর্মের শেষে, আমরা একটি বাটন তৈরি করতে চাই যাতে "Submit Your Interest" লেখা থাকে। যখন এই বাটনটি ক্লিক করা হবে, বাটনের চারপাশে একটি 3px প্রস্থের نارঙি বর্ডার প্রযোজ্য হবে।
আমরা নিচের কোড ব্যবহার করে এই বাটনটি তৈরি করতে পারি:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active { border: 3px solid orange; }
</style>আমাদের কোডের আউটপুট: কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML ফাইলে, আমরা <button> ট্যাগ ব্যবহার করে একটি বাটন সংজ্ঞায়িত করেছি। এই বাটনে "Submit Your Interest" টেক্সট রয়েছে।
আমাদের CSS স্টাইলশীটে, আমরা একটি রুল সংজ্ঞায়িত করেছি যা একটি <button> ট্যাগে প্রযোজ্য হয় যখন এটি ব্যবহারকারী দ্বারা একটিভ করা হয়। এই রুল আমাদের বাটনের চারপাশে একটি 3px প্রস্থের স olid বর্ডার তৈরি করে। আমরা :active সিলেক্টর ব্যবহার করেছি এই রুল শুধু তখন প্রযোজ্য করার জন্য যখন বাটন এক্টিভ থাকে।
সুতরাং, যদি আমরা আমাদের বাটনে ক্লিক করি, একটি نارঙি বর্ডার ظاهر হবে, এবং যতক্ষণ না আমরা বাটনে ক্লিক করা বন্ধ করি, ততক্ষণ বর্ডারটি গায়ব হয়ে যাবে।
উপসংহার (Conclusion)
CSS :active সিউডো-ক্লাস আপনাকে একটি এলিমেন্ট সিলেক্ট করতে দেয় যখন সেটি তার "এক্টিভ" স্টেটে থাকে। একবার আপনি একটি এক্টিভ এলিমেন্ট সিলেক্ট করলে, আপনি সেটিতে একটি স্টাইল বা স্টাইল সেট প্রযোজ্য করতে পারেন।
:active সিউডো-ক্লাস সাধারণত <a> ট্যাগ এবং <button> ট্যাগের সাথে ব্যবহৃত হয় যথাক্রমে লিংক বা বাটন ক্লিক করার সময় ট্রিগার হওয়া ইফেক্ট তৈরি করার জন্য।
এই টিউটোরিয়ালে CSS সিউডো-ক্লাসের বেসিক এবং :active সিউডো-ক্লাস কীভাবে ব্যবহার করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি :active সিউডো-ক্লাস এক্সপার্টের মত ব্যবহার করার জ্ঞান দিয়ে সुसজ্জিত!
