সিএসএস সুডো-ক্লাস(Pseudo-classes)
সুডো-ক্লাস কি?
একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস :hover এর মাধ্যমে সিলেক্ট করতে হবে।
উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ
নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে।
মাউস আনুন, পরিবর্তন দেখুন।
সকল সিএসএস সুডো-ক্লাস
| সিলেক্টর | উদাহরণ | বর্ণনা |
|---|---|---|
:active |
a:active |
একটিভ লিংককে সিলেক্ট করবে। |
:checked |
input:checked |
যেসকল <input> এলিমেন্ট "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:disabled |
input:disabled |
যেসকল <input> এলিমেন্ট "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:empty |
div:empty |
যেসকল <div> এলিমেন্টের কোন চাইল্ড এলিমেন্ট নেই তাদেরকে সিলেক্ট করবে। |
:enabled |
input:enabled |
প্রত্যেকটি সক্রিয় <input> এলিমেন্টকে সিলেক্ট করবে। |
:first-child |
li:first-child |
প্যারেন্ট এলিমেন্টের প্রথম <li> চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
:first-of-type |
li:first-of-type |
প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো <li> এলিমেন্টের মধ্যে প্রথম <li> এলিমেন্টকে সিলেক্ট করবে। |
:focus |
input:focus |
ফোকাসকৃত <input> এলিমেন্টকে সিলেক্ট করবে। |
:hover |
div:hover |
<div> এলিমেন্টের উপর মাউসের কার্সর থাকা অবস্থাকে সিলেক্ট করবে। |
:in-range |
input:in-range |
একটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ <input> এলিমেন্টকে সিলেক্ট করবে। |
:invalid |
input:invalid |
ইনভ্যালিড ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:lang |
p:lang(lan) |
lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল <p> এলিমেন্টকে সিলেক্ট করে |
:last-child |
li:last-child |
প্যারেন্ট এলিমেন্টের সর্বশেষ <li> চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
:last-of-type |
li:last-of-type |
প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো <li> এলিমেন্টের মধ্যে সর্বশেষ <li> এলিমেন্টকে সিলেক্ট করবে। |
:link |
a:link |
একটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে। |
:not(selector) |
:not(div) |
<div> এলিমেন্ট ছাড়া সকল এলিমেন্টকে সিলেক্ট করবে |
:nth-child(n) |
p:nth-child(2) |
প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-last-child(n) |
p:nth-last-child(2) |
একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
একই প্যারেন্ট এলিমেন্টের সবগুলো <p> এলিমেন্টের মধ্যে শেষের দিক থেকে দ্বিতীয় <p> এলিমেন্টকে সিলেক্ট করবে। |
:nth-of-type(n) |
p:nth-of-type(2) |
প্যারেন্ট এলিমেন্টের সবগুলো <p> এলিমেন্টের মধ্যে দ্বিতীয় <p> এলিমেন্টকে সিলেক্ট করবে। |
:only-of-type |
p:only-of-type |
যদি <p> এলিমেন্টটি তার প্যারেন্টের একমাত্র <p> এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে। |
:only-child |
p:only-child |
যদি <p> এলিমেন্টটি তার প্যারেন্টের একমাত্র চাইল্ড এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে। |
:optional |
input:optional |
required এট্রিবিউট ব্যাতীত বাকি <input> এলিমেন্টগুলোকে সিলেক্ট করবে। |
:out-of-range |
input:out-of-range |
নির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:read-only |
input:read-only |
"readonly" এট্রিবিউটযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:read-write |
input:read-write |
"readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো <input> এলিমেন্টকে সিলেক্ট করবে। |
:required |
input:required |
"required" এট্রিবিউটযুক্ত সবগুলো <input> এলিমেন্টকে সিলেক্ট করবে। |
:root |
root |
ডকুমেন্টের মূল(সাধারনত <html>) এলিমেন্টকে সিলেক্ট করবে। |
:target |
#news:target |
সক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে। |
:valid |
input:valid |
সকল ভ্যালিড ভ্যালুযুক্ত <input> এলিমেন্টকে সিলেক্ট করবে। |
:visited |
a:visited |
ভিজিটেড লিংককে সিলেক্ট করবে। |
গঠন প্রণালী
সুডো-ক্লাস এর গঠন প্রণালীঃ
selector:pseudo-class {
property: value;
}
অ্যাঙ্কর(Anchor) সুডো-ক্লাস
একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
/* আনভিজিটেড লিঙ্ক এর স্টাইল */
a:link {
color: blue;
}
/* ভিজিট হওয়া লিঙ্ক এর স্টাইল */
a:visited {
color: red;
}
/* মাউস হোভারে লিঙ্ক এর স্টাইল */
a:hover {
color: aqua;
}
/* সিলেক্টেড লিঙ্ক এর স্টাইল */
a:active {
color: green;
}
</style>
</head>
<body>
<p><i><a href="https://www.facebook.com/sattacademy" target="_blank">স্যাট একাডেমির ফেসবুক পেজ</a></i></p>
</body>
</html>
বিঃদ্রঃ লিংকের ক্ষেত্রে এই সুডো ক্লাসটি পরিপূর্ণভাবে কার্যকরি করতে আমাদের এই উদাহরণে ব্যবহৃত ক্রমটি ফলো করবেন।
ফলাফল
উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে a:hover অবশ্যই a:link এবং
a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।
সুডো-ক্লাস এবং সিএসএস-ক্লাস
আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি।
নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a.hover-class:hover {
color: blue;
}
</style>
</head>
<body>
<p><a class="hover-class" href="https://www.sattacademy.com/css/index.php" target="_blank">
সিএসএস টিউটোরিয়াল</a></p>
<p><a href="https://www.sattacademy.com/html/index.php" target="_blank">এইচটিএমএল টিউটোরিয়াল</a></p>
</body>
</html>
ফলাফল
<div> এর মধ্যে হোভার
নিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে :hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি <div> এলিমেন্টের হোভারের সময় কালার পরিবর্তন করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: slategray;
color: white;
padding: 40px;
text-align: center;
border: 2px solid green;
}
div:hover {
background-color: forestgreen;
border: 2px solid red;
outline: 2px dotted blue;
}
</style>
</head>
<body>
<p>মাউস হোভার করলে div এলিমেন্টের ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে।</p>
<div>মাউস হোভার করুন!!</div>
</body>
</html>
ফলাফল
টুলটিপ হোভার
নিম্নের উদাহরণে <div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি <p> এলিমেন্ট দেখা যাবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: slategray;
color: white;
border: 2px solid yellow;
padding: 15px;
}
p {
display: none;
background-color: DodgerBlue;
padding: 5px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>লেখাটির উপর মাউস হোভার করলে div এলিমেন্টের ভিতরে একটি প্যারাগ্রাফ টুলটিপ আকারে প্রদর্শিত হবে।
<p>হোভার করার ফলে এই প্যারাগ্রাফটি প্রদর্শিত হয়েছে!!</p>
</div>
</body>
</html>
ফলাফল
:first-child সুডো-ক্লাস
প্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা :first-child সুডো ক্লাস ব্যবহার করবো।
নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি <p> এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p:first-child {
background-color: DodgerBlue;
color: white;
border: 2px dotted red;
padding: 10px;
}
</style>
</head>
<body>
<p>এটি প্রথম প্যারাগ্রাফ। :first-child সিলেক্টর ব্যবহার করায় এটিই সিলেক্ট হবে।</p>
<p>এটি দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এটি তৃতীয় প্যারাগ্রাফ।</p>
<p>এটি চতুর্থ প্যারাগ্রাফ।</p>
<p>এটি পঞ্চম প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
<div> এলিমেন্টের মধ্যের <p> এলিমেন্ট সিলেক্ট
নিম্নের উদাহরণে <div> এলিমেন্টের মধ্যে অবস্থিত প্রথম <p> এলিমেন্টটি সিলেক্ট করবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div p:first-child {
background-color: DodgerBlue;
color: white;
border: 2px dotted red;
padding: 10px;
}
</style>
</head>
<body>
<p>এটি বডি এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি বডি এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
<div>
<p>এটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এটি div এলিমেন্টের তৃতীয় প্যারাগ্রাফ।</p>
</div>
</body>
</html>
ফলাফল
প্রথম চাইল্ড এলিমেন্ট <li> এর মধ্যে <span> এলিমেন্ট গুলো সিলেক্ট
নিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট <li> কে খুজে বের করে তার মধ্যকার <span> এলিমেন্ট গুলো সিলেক্ট করবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
li:first-child span {
background: slateblue;
color: white;
padding: 0 6px 0 6px;
}
</style>
</head>
<body>
<ul>
<li>মেসেজ <span>৬</span></li>
<li>গ্যালারী <span>৪৩</span></li>
<li>কন্টাক্ট <span>২২</span></li>
</ul>
<ol>
<li>মেসেজ <span>৬</span></li>
<li>গ্যালারী <span>৪৩</span></li>
<li>কন্টাক্ট <span>২২</span></li>
</ol>
</body>
</html>
ফলাফল