CSS :focus পসিডো-ক্লাস: সম্পূর্ণ গাইড

CSS :focus পসিডো-ক্লাস একটি এলিমেন্টকে তার ফোকাস অবস্থায় সিলেক্ট করে। এটি ঘটে যখন আপনি কোনো এলিমেন্টে ক্লিক করেন বা ট্যাব বাটন দিয়ে সেটাকে সিলেক্ট করেন। :focus সিলেক্ট করতে চাওয়া এলিমেন্টের নামের পরে লিখতে হয়।

আপনি চাইতে পারেন কোনো এলিমেন্টে স্টাইল শুধু তখন লাগুক যখন সেটি ওয়েব পেজে ফোকাস পাবে। উদাহরণস্বরূপ, ব্যবহারকারী একটি ফর্ম ফিল্ডে ক্লিক করলে সেটার চারপাশে বর্ডার দেখানোর প্রয়োজন হতে পারে।

সেটায় CSS :focus পসিডো-ক্লাস কাজে লাগে। :focus পসিডো-ক্লাস ব্যবহারকারী যখন কোনো এলিমেন্টে ক্লিক করে বা ট্যাব কীবোর্ড বাটন দিয়ে সেটাকে সিলেক্ট করে তখন স্টাইল প্রয়োগ করে।

এই টিউটোরিয়ালে উদাহরণসহ CSS :focus পসিডো-ক্লাসের মৌলিক বিষয় এবং কোডে এর ব্যবহার আলোচনা করা হয়েছে। এটি পড়া শেষ করলে আপনি ফোকাসড এলিমেন্টে স্টাইল প্রয়োগ করতে :focus পসিডো-ক্লাস ব্যবহারে দক্ষ হবেন।

CSS পসিডো-ক্লাসসমূহ

একটি পসিডো-ক্লাস হলো একটি কীওয়ার্ড যা CSS সিলেক্টরের সাথে যোগ করা হয়। পসিডো-ক্লাস নির্দিষ্ট করে যে কোনো অবস্থায় এলিমেন্ট থাকলে স্টাইল প্রয়োগ হবে। পসিডো-ক্লাস সিলেক্টরের পরে যোগ করা হয়।

পসিডো-ক্লাসগুলো আপনাকে এলিমেন্টের বিশেষ অবস্থার জন্য নিয়ম নির্ধারণ করতে দেয়, যেমন যখন আপনি কোনো এলিমেন্টকে ফোকাস দেন। এই টিউটোরিয়ালে আমরা :focus পসিডো-ক্লাসের ওপর ফোকাস করব।

CSS :focus পসিডো-ক্লাস

CSS :focus পসিডো-ক্লাস একটি এলিমেন্টে স্টাইল প্রয়োগ করে যখন সেটি ওয়েব পেজে ফোকাস পায়। যদি ব্যবহারকারী কোনো এলিমেন্টে ক্লিক করে বা ট্যাব কী দিয়ে সেটাকে সিলেক্ট করে, তবে সেটি একটি ফোকাসড এলিমেন্ট হয়ে ওঠে।

:focus পসিডো-ক্লাসের সিনট্যাক্স:

textarea:focus {
  border: 1px solid blue;
}

এই কোড ওয়েব পেজের যেকোনো HTML <textarea> এলিমেন্টের চারপাশে এক পিক্সেল প্রস্থের স olid নীল বর্ডার সেট করে। কিন্তু এই নিয়ম শুধু তখন প্রয়োগ হবে যখন <textarea> এলিমেন্ট ফোকাসে থাকবে।

আমাদের পসিডো-ক্লাসটি সিলেক্ট করতে চাওয়া এলিমেন্টের পরে লিখতে হয়। একটি সিলেক্টরের তালিকায় প্রতিটি এলিমেন্টের জন্য আলাদা :focus পসিডো-ক্লাস নির্দিষ্ট করা প্রয়োজন।

নিচের সিনট্যাক্সটি বিবেচনা করুন:

input, textarea:focus {
  border: 1px solid blue;
}

এই কোডের CSS নিয়ম সব <input> এলিমেন্ট এবং টেক্সট এরিয়া ফোকাস পেলে সব <textarea> ট্যাগে প্রয়োগ হবে। কিন্তু ফোকাস পেলে <input> ট্যাগে এই নিয়ম প্রয়োগ হবে না।

:focus সিলেক্টর ব্যবহার করার একটি সাধারণ পরিস্থিতি হলো ওয়েব ফর্ম স্টাইল করা। উদাহরণস্বরূপ, আপনি চাইতে পারেন ব্যবহারকারী ফর্ম ফিল্ডে ক্লিক করলে তার পটভূমির রং পরিবর্তন হোক। অথবা বর্ডার রং পরিবর্তন হোক।

:focus CSS উদাহরণ

আমাদের একজন ব্যবহারকারীর প্রথম নাম সংগ্রহ করার জন্য একটি ওয়েব ফর্ম ফিল্ড ডিজাইন করতে বলা হয়েছে। যখন ফর্ম ফিল্ড ফোকাস অবস্থায় যাবে, তখন সেটার চারপাশে নারাঙ্গি বর্ডার এবং পটভূমির রং হালকা স্লেটি হয়ে যাবে।

নিচের কোড ব্যবহার করে এই ফর্ম ফিল্ড ডিজাইন করা যায়:

<html>
<input class="textField" placeholder="First Name">
<style>
.textField:focus {
  background-color: lightgray;
  border: 2px solid orange;
}
</style>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমরা textField ক্লাস নাম সহ একটি HTML <input> ফিল্ড সংজ্ঞায়িত করেছি। এই ইনপুট ফিল্ডে First Name প্লেসহোল্ডার টেক্সট দেখাবে।

যখন ব্যবহারকারী ফর্ম ফিল্ডকে ফোকাসে আনবে, আমাদের .textField:focus নিয়মের CSS প্রপার্টিগুলো প্রয়োগ হবে। এই স্টাইলগুলো হালকা স্লেটি পটভূমি রং সেট করে এবং ফর্ম ফিল্ডের চারপাশে ২px প্রস্থের স olid নারাঙ্গি CSS বর্ডার প্রয়োগ করে।

যখন ব্যবহারকারী ফর্ম ফিল্ডকে ফোকাস থেকে বের করবে, এই স্টাইলগুলো আর প্রয়োগ হবে না।

উপসংহার

:focus পসিডো-ক্লাস একটি স্টাইল প্রয়োগ করে যখন ব্যবহারকারী ওয়েব পেজে কোনো এলিমেন্টকে ফোকাসে আনে। :focus সাধারণত ফর্ম ফিল্ডে স্টাইল প্রয়োগ করতে ব্যবহৃত হয় যা ব্যবহারকারী ফোকাস করলে ট্রিগার হয়।

:focus CSS-র অনেক পসিডো-ক্লাসের একটি, যেমন :hover। পসিডো-ক্লাস ব্যবহার করতে আপনার CSS সিলেক্টরের পরে পসিডো-ক্লাসের নাম লিখতে হয়।

CSS সম্পর্কে আরও জানতে আগ্রহী? আমাদের How to Learn CSS গাইড দেখুন। সেখানে CSS শিখার জন্য অ্যাকশনেবল টিপস এবং শীর্ষ শিক্ষামূলক সংস্থানদের তালিকা পাবেন।