সুডো-ক্লাস কি?
একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস :hover এর মাধ্যমে সিলেক্ট করতে হবে।
উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ
নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে।
মাউস আনুন, পরিবর্তন দেখুন।
সকল সিএসএস সুডো-ক্লাস
| সিলেক্টর | উদাহরণ | বর্ণনা |
|---|---|---|
:active | a:active | একটিভ লিংককে সিলেক্ট করবে। |
:checked | input:checked | যেসকল "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:disabled | input:disabled | যেসকল "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে। |
:empty | div:empty | যেসকল |
:enabled | input:enabled | প্রত্যেকটি সক্রিয় |
:first-child | li:first-child | প্যারেন্ট এলিমেন্টের প্রথম |
:first-of-type | li:first-of-type | প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো |
:focus | input:focus | ফোকাসকৃত |
:hover | div:hover | |
:in-range | input:in-range | একটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ |
:invalid | input:invalid | ইনভ্যালিড ভ্যালুযুক্ত |
:lang | p:lang(lan) | lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল |
:last-child | li:last-child | প্যারেন্ট এলিমেন্টের সর্বশেষ |
:last-of-type | li:last-of-type | প্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো |
:link | a:link | একটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে। |
:not(selector) | :not(div) | |
:nth-child(n) | p:nth-child(2) | প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড |
:nth-last-child(n) | p:nth-last-child(2) | একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড |
:nth-last-of-type(n) | p:nth-last-of-type(2) | একই প্যারেন্ট এলিমেন্টের সবগুলো |
:nth-of-type(n) | p:nth-of-type(2) | প্যারেন্ট এলিমেন্টের সবগুলো |
:only-of-type | p:only-of-type | যদি |
:only-child | p:only-child | যদি |
:optional | input:optional | required এট্রিবিউট ব্যাতীত বাকি |
:out-of-range | input:out-of-range | নির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত |
:read-only | input:read-only | "readonly" এট্রিবিউটযুক্ত |
:read-write | input:read-write | "readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো |
:required | input:required | "required" এট্রিবিউটযুক্ত সবগুলো |
:root | root | ডকুমেন্টের মূল(সাধারনত ) এলিমেন্টকে সিলেক্ট করবে। |
:target | #news:target | সক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে। |
:valid | input:valid | সকল ভ্যালিড ভ্যালুযুক্ত |
:visited | a:visited | ভিজিটেড লিংককে সিলেক্ট করবে। |
গঠন প্রণালী
সুডো-ক্লাস এর গঠন প্রণালীঃ
selector:pseudo-class {
property: value;
}অ্যাঙ্কর(Anchor) সুডো-ক্লাস
একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ
kt_satt_skill_example_id=866
উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।
সুডো-ক্লাস এবং সিএসএস-ক্লাস
আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি।
নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ
kt_satt_skill_example_id=867
< div> এর মধ্যে হোভার
নিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে kt_satt_skill_example_id=868 নিম্নের উদাহরণে kt_satt_skill_example_id=869 প্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি kt_satt_skill_example_id=871 নিম্নের উদাহরণে kt_satt_skill_example_id=872 নিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট kt_satt_skill_example_id=880 :hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি টুলটিপ হোভার
< div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি < p> এলিমেন্ট দেখা যাবে।:first-child সুডো-ক্লাস:first-child সুডো ক্লাস ব্যবহার করবো। এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।< div> এলিমেন্টের মধ্যের < p> এলিমেন্ট সিলেক্ট< div> এলিমেন্টের মধ্যে অবস্থিত প্রথম < p> এলিমেন্টটি সিলেক্ট করবে।প্রথম চাইল্ড এলিমেন্ট
< li> এর মধ্যে < span> এলিমেন্ট গুলো সিলেক্ট< li> কে খুজে বের করে তার মধ্যকার < span> এলিমেন্ট গুলো সিলেক্ট করবে।
Promotion
Download Our Mobile Apps
