Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

সিএসএস সিডো ক্লাস - CSS Pseudo Class


সিএসএস এর কিছু সিলেক্টরে special effect যুক্ত করার জন্য সিএসএস সিডো ক্লাস ব্যবহার করা হয়। নিচে :hover সিডো ক্লাসের ব্যাবহারিক উদাহরন দেখুন।

Hovar Pseudo-Class




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;
   }

কোড এডিটর



সমর্থিত Pseudo Class

নিচে 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 ওয়েব পেজটি ব্রাউজ করুন।