সিএসএস এর কিছু সিলেক্টরে special effect যুক্ত করার জন্য সিএসএস সিডো ক্লাস ব্যবহার করা হয়। নিচে :hover সিডো ক্লাসের ব্যাবহারিক উদাহরন দেখুন।
Hovar Pseudo-Classসিএসএস এর সিডো ক্লাস হল কত গুলো বিশেষ কিওয়ার্ড, যা এইচটিএমএল এলিমেন্ট গুলোর বিশেষ অবস্থায় স্টাইল করতে বাবহার করা হয়। এইচটিএমএল এলিমেন্ট গুলোর সম্পর্কের ওপর অর্থাৎ নেস্তিং এর ভিত্তিতে কাজ করে না। সিডো ক্লাস গুলো কাজ করে এইচটিএমএল এলিমেন্ট গুলোর বিভিন্ন অবস্থা বা state এর ওপর নির্ভর করে।
নিচে সিএসএস সিডো-ক্লাস এর সিনট্যাক্স দেখুন।
selector:pseudo-class { property: value; }
নিচে একটি উদাহরন দেখুন, যেখানে একটি :hover সিডো-ক্লাস ব্যবহার করে একটি বাটনে এফেক্ট যুক্ত করা হয়েছে।
button:hover { color: blue; }
একটি এইচটিএমএল হাইপারলিংককে সিডো-ক্লাস ব্যবহার করে বিভিন্ন ভাবে স্টাইল করা যায়। নীচে একটি উদাহরণ দেখুন, যেখানে :link, a:link, a:hover এবং a:active ব্যবহার করে স্টাইল করা হয়েছে।
a:link {color:#FF0000;} /* ব্রাউজ করা হয়নি এমন লিংক */ a:visited {color:#00FF00;} /* ব্রাউজ করা হয়েছে এমন লিংক */ a:hover {color:#FF00FF;} /* মাউস হভার করা হয়েছে এমন লিংক */ a:active {color:#0000FF;} /* সিলেক্ট করা হয়েছে এমন লিংক */
নোট - সিএসএস সিডো-ক্লাস গুলো case sensetive নয়।
সিএসএস এর সিডো-ক্লাস এর সাথে সিএসএস ক্লাসও ব্যবহার করা যায়। নিচে সিডো-ক্লাস এর সাথে সিএসএস ক্লাস ব্যবহার করার সিনট্যাক্স দেখান হল।
selector.class:pseudo-class { property: value; }
নিচে একটি উদাহরন দেখুন, যেখানে :hover সিডো-ক্লাস এর সাথে একটি a.red সিএসএস ক্লাস ব্যবহার করা হয়েছে।
a.red:hover { color: red; }
নিচে W3C সমর্থিত কিছু আদর্শ Pseudo Class এর উদাহরন দেখুন।
:active | :disabled | :future |
:any-link | :drop | :focus |
:blank | :empty | :focus-visible |
:checked | :enabled | :focus-within |
:current | :first | :has() |
:default | :first-child | :host |
:defined | :first-of-type | :host() |
:dir() | :fullscreen | :host-context() |
:hover | :nth-child() | :last-child |
:nth-child() | :not() | :indeterminate |
:nth-col() | :local-link | :lang() |
:nth-last-child() | :link | :is() |
:nth-last-col() | :left | :invalid |
:nth-last-of-type() | :last-of-type | :in-range |
:target | :read-only | :placeholder-shown |
:target-within | :read-write | :past |
:user-invalid | :required | :out-of-range |
:valid | :right | :optional |
:visited | :root | :only-of-type |
:where() | :scope | :only-child |
:nth-of-type() | :state() |
সিএসএস এর সিডো-ক্লাস সম্পর্কে Mozilla Developer থেকে আরও জানতে Pseudo-classes ওয়েব পেজটি ব্রাউজ করুন।