HTML-এ বিদ্যমান এলিমেন্টগুলোর নির্দিষ্ট স্টেট (hover, visited, disabled, ইত্যাদি) অনুযায়ী স্পেসিফিক স্টাইল যোগ করতে CSS 의사-ক্লাস ব্যবহার করা হয়।
দ্রষ্টব্য - CSS3-এ 의사-ক্লাস এবং 의사-এলিমেন্ট আলাদা করার জন্য 의사-ক্লাসে সিঙ্গেল-কোলন নোটেশন ব্যবহার করা হয়।
সিনট্যাক্স
এলিমেন্টের ওপর CSS 의사-ক্লাস ব্যবহার করার সিনট্যাক্স:
Selector:pseudo-class { css-property: /*value*/; }
উপলব্ধ সব CSS 의사-ক্লাস নিচে দেওয়া হলো:
| ক্রম | Pseudo-Class & Description |
|---|---|
| 1 | active উল্লিখিত সক্রিয় এলিমেন্ট সিলেক্ট করে |
| 2 | checked উল্লিখিত সমস্ত চেক করা এলিমেন্ট সিলেক্ট করে |
| 3 | disabled উল্লিখিত সমস্ত ডিজেবল্ড এলিমেন্ট সিলেক্ট করে |
| 4 | empty যে এলিমেন্টের কোনো চাইল্ড নেই সেগুলো সিলেক্ট করে |
| 5 | enabled উল্লিখিত সমস্ত ইনেবল্ড এলিমেন্ট সিলেক্ট করে |
| 6 | first-child প্যারেন্টের প্রথম চাইল্ড হয় এমন এলিমেন্ট সিলেক্ট করে |
| 7 | first-of-type প্যারেন্টের প্রথম উल्लিখিত টাইপের এলিমেন্ট সিলেক্ট করে |
| 8 | focus ফোকাস থাকা এলিমেন্ট সিলেক্ট করে |
| 9 | hover মাউস ওভার থাকা এলিমেন্ট সিলেক্ট করে |
| 10 | in-range নির্দিষ্ট রেঞ্জের ভিতরে মান থাকা এলিমেন্ট সিলেক্ট করে |
| 11 | invalid অবৈধ মান থাকা এলিমেন্ট সিলেক্ট করে |
| 12 | lang(language) "language" দিয়ে শুরু হওয়া lang অ্যাট্রিবিউট যেগুলো থাকে সেগুলো সিলেক্ট করে |
| 13 | last-child প্যারেন্টের শেষ চাইল্ড হয় এমন এলিমেন্ট সিলেক্ট করে |
| 14 | last-of-type প্যারেন্টের শেষ উল্লিখিত টাইপের এলিমেন্ট সিলেক্ট করে |
| 15 | link অনভিজিটেড এলিমেন্ট সিলেক্ট করে |
| 16 | not(selector) উল্লিখিত এলিমেন্ট বাদে সব সিলেক্ট করে |
| 17 | nth-child(n) প্যারেন্টের nth চাইল্ড হয় এমন এলিমেন্ট সিলেক্ট করে |
| 18 | nth-last-child(n) শেষ চাইল্ড থেকে গণনা করে nth চাইল্ড সিলেক্ট করে |
| 19 | nth-last-of-type(n) শেষ চাইল্ড থেকে গণনা করে nth টাইপের এলিমেন্ট সিলেক্ট করে |
| 20 | nth-of-type(n) প্যারেন্টের nth টাইপের এলিমেন্ট সিলেক্ট করে |
| 21 | only-of-type প্যারেন্টের একমাত্র উল্লিখিত টাইপের এলিমেন্ট সিলেক্ট করে |
| 22 | only-child প্যারেন্টের একমাত্র চাইল্ড হয় এমন এলিমেন্ট সিলেক্ট করে |
| 23 | optional "required" অ্যাট্রিবিউট নেই এমন এলিমেন্ট সিলেক্ট করে |
| 24 | out-of-range নির্দিষ্ট রেঞ্জের বাইরে মান থাকা এলিমেন্ট সিলেক্ট করে |
| 25 | read-only "readonly" অ্যাট্রিবিউট নির্দিষ্ট থাকা এলিমেন্ট সিলেক্ট করে |
| 26 | read-write "readonly" অ্যাট্রিবিউট নেই এমন এলিমেন্ট সিলেক্ট করে |
| 27 | required "required" অ্যাট্রিবিউট নির্দিষ্ট থাকা এলিমেন্ট সিলেক্ট করে |
| 28 | root ডকুমেন্টের রুট এলিমেন্ট সিলেক্ট করে |
| 29 | target বর্তমান সক্রিয় এলিমেন্ট সিলেক্ট করে (URL-এ সেই অ্যাঙ্কর নাম থাকলে) |
| 30 | valid বৈধ মান থাকা এলিমেন্ট সিলেক্ট করে |
| 31 | visited ভিজিটেড এলিমেন্ট সিলেক্ট করে |
উদাহরণ
CSS 의사-ক্লাসের উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Anchor Pseudo Classes</title> </head> <style> div { color: #000; padding:20px; background-image: linear-gradient(135deg, grey 0%, white 100%); text-align: center; } .anchor { color: #FF8A00; } .anchor:last-child { color: #03A9F4; } .anchor:visited { color: #FEDC11; } .anchor:hover { color: #C303C3; } .anchor:active { color: #4CAF50; } </style> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
আরেকটি CSS 의사-ক্লাস উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Classes</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } .child:hover{ background-color: #000; } </style> </head> <body> <form> <fieldset> <legend>CSS-Pseudo-Classes</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
ডিভ এলিমেন্টগুলোর ওপর হোভার না করলে:
ডিভ এলিমেন্টগুলোর ওপর হোভার করলে:
