সিউডো ক্লাস



বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ক্লাস ব্যবহার করা হয়।
সিউডো ক্লাস এর সিনট্যাক্স হচ্ছে selector:pseudo-class {property:value;} । সি এস এস ক্লাস সিলেক্টরও সিউডো ক্লাসের সাথে ব্যবহার করা যায়, এক্ষেত্রে সিনট্যাক্স হবে selector.class:pseudo-class {property:value;} ।
নেভিগেশন বারের বিভিন্ন মেনু বিভিন্ন অবস্থায় কেমন দেখাবে তা সিউডো ক্লাস দ্বারা নির্ধারণ করা হয়। এছাড়া বিভিন্ন চাইল্ড সিলেক্টরের ফাস্ট চাইল্ড সিলেক্ট করা সহ আরো অনেক ধরণের কাজ সিউডো ক্লাস দ্বারা করা যায়।

সিউডো ক্লাস তিন ধরণের । তা হল
i) এংকর সিউডো ক্লাস
ii) ফাস্ট চাইল্ড সিউডো ক্লাস
iii) ফল্যাঙ্গুয়েজ সিউডো ক্লাস

নিচে তার বিস্তারিত আলোচনা করা হল--



এংকর সিউডো ক্লাস

এংকর নাম শুনের নিশ্চই বুঝেছেন যে এটা লিংক অর্থাৎ <a></a> ট্যাগের কথা থাকবে।
হ্যা ঠিক ধরেছেন।
সাধারণত HTML এ লিংক তৈরির জন্য এংকর ট্যাগ(<a></a>) ব্যবহার করা হয়। সি এস এস ব্যবহার করে স্ট্যাইল তৈরির জন্য স্ট্যাইল শীটে সিলেক্টর হিসেবে a ব্যবহার করা হয়। কিন্তু একটি লিংকের চারটি ভিন্ন অবস্থা হতে পারে যা শুধু মাত্র সিলেক্টর হিসেবে a ব্যবহার করে নির্দেশ করা যায় না। এজন্য এংকর সিউডো ক্লাস ব্যবহার করা হয়; যেমন a:link , a:visited, a:hover এবং a:active ।

এটি এরকম হয় দেখতে --

<head>
<style>
a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover {
    color: hotpink;
}
a:active {
    color: blue;
}
</style>
</head>


a:link সিলেক্টর নির্দেশ করে প্রথমবার ব্যবহার না করা পর্যন্ত লিংকটি কিভাবে প্রদর্শিত হবে।
a:visited সিলেক্টর নির্দেশ করে লিংকটি এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি কিভাবে প্রদর্শিত হবে।
a:hover সিলেক্টর নির্দেশ করে লিংকটি ব্যবহার করা হোক বা না হোক, লিংকের উপর মাউস না রাখলে লিংকটি কিভাবে প্রদর্শিত হবে।
a:active সিলেক্টর নির্দেশ করে লিংকটিতে মাউস ক্লিক করার মূহর্তে লিংকটি কিভাবে প্রদর্শিত হবে।

উদাহরণ ::

<!DOCTYPE html>
<html>
<head>

<style>
a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover {
    color: hotpink;
}
a:active {
    color: blue;
}
</style>
</head>
<body>

<p><b><a href="#" target="_blank">This is a link</a></b></p>

</body>
</html>


ফাস্ট চাইল্ড সিউডো ক্লাস


একটা সিলেক্টরের আন্ডারে অনেকগুলো একই ইলিমেন্ট এর চাইল্ড সিলেক্টর থাকতে পারে। যেমন <body><p></p><h2></h2><p></p></body> এখানে body এর মধ্যে দুইটি p চাইল্ড হিসেবে আছে। এখন যদি শুধুমাত্র প্রথম p এর জন্য স্ট্যাইল তৈরি করতে চাওয়া হয় তাহলে p এর ফাস্ট চাইল্ড সিউডো ক্লাস সিলেক্টর ব্যবহার করতে হবে; যেমন p:first-child ।


<head>
<style>
p:first-child {
    color: blue;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
p:first-child {
    color: blue;
}
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

</body>
</html>



ল্যাঙ্গুয়েজ সিউডো ক্লাস


কোন বিশেষ ল্যাঙ্গুয়েজ বা ভাষায় লিখিত কোন লাইন কে বিশেষ কোন নিয়মে বা বিশেষ উপায়ে প্রদর্শনের জন্য ল্যাঙ্গুয়েজ সিউডো ক্লাস ব্যবহার করা হয়। যেমন “এই লেখাটি বাংলা ভাষায় লেখা।তাই এখানে কোটেশনে দুটি স্টার চিহ্ন দেখা যাবে।” লেখাটির ডাবল কোটেশন (**) চিহ্ন দ্বারা পরিবর্তিত হবে।এজন্য প্রথমে HTML এ লেখাটিকে এর মধ্যে রাখাতে হবে।q:lang(bn) ল্যাঙ্গুয়েজ সিউডো ক্লাস দ্বারা স্ট্যাইল শীটে সিলেক্ট করে স্ট্যাইল নির্ধারণ করে দিতে হবে।


<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>



উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>




আশা করি বুঝেছেন। কোন সমস্যা হলে কমেন্ট করতে ভুলবেন না।



আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন। এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন