ট্যাগ নির্বাচন করতে পারে, যেখানে শৈলীগুলির একটি সেট প্রয়োগ করা হবে।
প্রায়শই, আপনি যখন একটি ওয়েবসাইট স্টাইল করছেন, তখন আপনি একটি স্টাইল প্রয়োগ করতে চাইবেন যখন একটি উপাদান একটি বিশেষ অবস্থায় প্রবেশ করেছে, যেমন ব্যবহারকারী দ্বারা ক্লিক করা বা মাউস ওভার করা। সেখানেই সিউডো-ক্লাস আসে।
সিউডো-ক্লাসগুলি হল একটি নির্বাচকের সাথে যুক্ত কীওয়ার্ড যা আপনাকে একটি নির্দিষ্ট উপাদান নির্বাচন করতে দেয় যখন সেই উপাদানটি একটি নির্দিষ্ট অবস্থায় থাকে।
এই টিউটোরিয়ালের জন্য, আমরা :active pseudo-class-এ ফোকাস করতে যাচ্ছি।
CSS :অ্যাক্টিভ সিউডো-ক্লাস
:active pseudo-class আপনাকে ব্যবহারকারী দ্বারা সক্রিয় করা একটি উপাদান নির্বাচন করতে দেয়। CSS পরিভাষায়, "অ্যাক্টিভেটিং" মানে যখন একজন ব্যবহারকারী মাউস বোতাম টিপে এবং উপাদানটিতে ক্লিক করেন।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷
গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
:active pseudo-class সাধারণত এবং উপাদানগুলির সাথে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি :active pseudo-class ব্যবহার করতে পারেন একটি লিঙ্কে ক্লিক করার সময় লাল রঙে পরিবর্তন করতে, অথবা একটি বোতামে ক্লিক করার সময় তার পটভূমির রঙ হালকা নীলে পরিবর্তন করতে।
একবার ব্যবহারকারী একটি উপাদানে ক্লিক করা বন্ধ করে দিলে, উপাদানটি আর "সক্রিয়" হবে না। সুতরাং, ব্যবহারকারী যখন কোনো উপাদানে ক্লিক করা বন্ধ করে দেয় তখন :সক্রিয় নির্বাচক দ্বারা উপাদানটি নির্বাচন করা হবে না।
CSS :সক্রিয় উদাহরণ
আপনি কিভাবে :active pseudo-class ব্যবহার করতে পারেন তা ব্যাখ্যা করার জন্য আসুন দুটি উদাহরণের মাধ্যমে চলুন।
সক্রিয় লিঙ্ক
ধরুন আমরা একটি স্থানীয় কার্ড গেম ক্লাবের জন্য একটি ওয়েবসাইট ডিজাইন করছি, বোর্ডের উইজার্ডস। আমাদেরকে একটি "সম্পর্কে" পৃষ্ঠা তৈরি করার দায়িত্ব দেওয়া হয়েছে যাতে একটি ওয়েব পৃষ্ঠার একটি লিঙ্ক রয়েছে যা ক্লাবের সদস্যদের দ্বারা খেলা কার্ড গেমগুলির তালিকা দেয়৷
ডিফল্টরূপে, এই লিঙ্কটি হালকা নীল রঙে উপস্থিত হওয়া উচিত। যখন এই লিঙ্কটি ক্লিক করা হয়, তখন এর পাঠ্যের রঙ কমলাতে পরিবর্তিত হওয়া উচিত। এই কাজটি সম্পন্ন করতে, আমরা :active pseudo-class ব্যবহার করতে পারি। একটি লিঙ্কে ক্লিক করার সময় আমরা আমাদের পাঠ্যের রঙ পরিবর্তন করতে যে কোডটি ব্যবহার করব তা এখানে:
<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 ফাইলে, আমরা
ট্যাগ ব্যবহার করে পাঠ্যের একটি অনুচ্ছেদ সংজ্ঞায়িত করেছি যা বোর্ড কার্ড গেম ক্লাবের উইজার্ডদের ইতিহাসের রূপরেখা দেয়। আমাদের
ট্যাগে, আমরা একটি ট্যাগ নির্দিষ্ট করেছি যা "games.html" পৃষ্ঠার সাথে লিঙ্ক করে এবং ব্যবহারকারী যখন "এখানে ক্লিক করুন" টেক্সটে ক্লিক করে তখন ট্রিগার হয়।
আমাদের CSS কোডে, আমরা দুটি শৈলীর নিয়ম উল্লেখ করেছি। প্রথমত, আমরা একটি নিয়ম নির্দিষ্ট করেছি যা সমস্ত ট্যাগের পাঠ্যের রঙ হালকা নীলে সেট করে। তারপর, আমরা :active নির্বাচক ব্যবহার করে একটি নিয়ম নির্দিষ্ট করেছি যা সমস্ত সক্রিয় ট্যাগের পাঠ্যের রঙ কমলাতে সেট করে। অন্য কথায়, ব্যবহারকারী যখন এটিতে ক্লিক করেন তখন এই নিয়মটি একটি লিঙ্কের রঙ পরিবর্তন করে।
সক্রিয় বোতাম
আমরা বোর্ড কার্ড গেম ক্লাবের উইজার্ডদের জন্য একটি ফর্ম নিয়ে কাজ করছি যা লোকেদের ক্লাবে তাদের আগ্রহ জমা দিতে দেয়।
আমাদের ফর্মের শেষের দিকে, আমরা একটি বোতাম তৈরি করতে চাই যা বলে "আপনার আগ্রহ জমা দিন"৷ যখন এই বোতামটি ক্লিক করা হয়, তখন বোতামের চারপাশে একটি 3px-প্রশস্ত কমলা বর্ডার প্রয়োগ করা উচিত।
আমরা নিম্নলিখিত কোড ব্যবহার করে এই বোতামটি তৈরি করতে পারি:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active {
border: 3px solid orange;
}
</style>
আমাদের কোড ফিরে আসে:আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের HTML ফাইলে, আমরা ট্যাগ ব্যবহার করে একটি বোতাম সংজ্ঞায়িত করেছি। এই বোতামটিতে "আপনার আগ্রহ জমা দিন" লেখা রয়েছে।
আমাদের CSS স্টাইল শীটে, আমরা একটি নিয়ম সংজ্ঞায়িত করেছি যা ব্যবহারকারীর দ্বারা সক্রিয় করা হলে একটি ট্যাগের ক্ষেত্রে প্রযোজ্য। এই নিয়মটি আমাদের বোতামের চারপাশে একটি 3px-প্রশস্ত কঠিন সীমানা তৈরি করে। বোতামটি সক্রিয় থাকলে শুধুমাত্র এই নিয়মটি প্রয়োগ করতে আমরা :active নির্বাচক ব্যবহার করি।
সুতরাং, যদি আমরা আমাদের বোতামে ক্লিক করি, একটি কমলা রঙের বর্ডার প্রদর্শিত হবে, এবং যত তাড়াতাড়ি আমরা বোতামে ক্লিক করা বন্ধ করি, বর্ডারটি অদৃশ্য হয়ে যাবে।
উপসংহার
CSS :active pseudo-class আপনাকে একটি উপাদান নির্বাচন করতে দেয় যখন এটি "সক্রিয়" অবস্থায় থাকে। একবার আপনি একটি সক্রিয় উপাদান নির্বাচন করলে, আপনি উপাদানটিতে একটি শৈলী বা শৈলীর সেট প্রয়োগ করতে পারেন।
:active pseudo-class সাধারণত ট্যাগ এবং ট্যাগের সাথে ব্যবহার করা হয় যথাক্রমে একটি লিঙ্ক বা বোতামে ক্লিক করার সময় ট্রিগার করা প্রভাব তৈরি করতে।
এই টিউটোরিয়ালে CSS সিউডো-ক্লাসের মূল বিষয় এবং কিভাবে :active pseudo-class ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হয়েছে। এখন আপনি একজন বিশেষজ্ঞের মতো :অ্যাকটিভ সিউডো-ক্লাস ব্যবহার শুরু করার জন্য প্রয়োজনীয় জ্ঞান দিয়ে সজ্জিত।
