CSS 의사-ক্লাসগুলো বিভিন্ন এলিমেন্টের বিশেষ স্টেটকে রিপ্রেজেন্ট করে, এগুলো শুধু ডকুমেন্টের বেসিক এলিমেন্টই নয় বরং তাদের এক্সটার্নাল ফ্যাক্টর যেমন স্ট্যাটাস, পজিশন, ইতিহাস ইত্যাদিও ডিপিক্ট করে। এই 의사-ক্লাস ব্যবহার করে ডেভেলপাররা সরাসরি CSS সিলেক্টর দিয়ে সিলেক্ট করা না যাওয়া এলিমেন্টগুলোকেও স্টাইল করতে পারেন।
সিনট্যাক্স
এলিমেন্টের ওপর CSS 의사-ক্লাস ব্যবহার করার সিনট্যাক্স:
Selector:pseudo-class { css-property: /*value*/; }
উদাহরণ
CSS 의사-ক্লাস ব্যবহার করার উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Class</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input:valid { color: #fefefe; background-color: #4CAF50; } input:invalid { color: #fefefe; background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>CSS Pseudo Class</legend> <label for="EmailSelect">Email : <input type="email" id="EmailSelect" size="25" required> </label><br> <label for="PassSelect">Password : <input type="password" id="PassSelect" minlength="8" required> </label> <div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div> </fieldset> </form> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
ফর্ম ফিল্ডে অবৈধ ডেটা থাকলে:
ফর্ম ফিল্ডে বৈধ ডেটা থাকলে:
উদাহরণ
আরেকটি CSS 의사-ক্লাস উদাহরণ (:target ব্যবহার):
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Class</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } a { text-decoration: none; background:grey; color: white; border-radius: 3px; padding: 6px; } input[type="button"] { border-radius: 10px; } :target { border:4px solid black; margin: 0 auto; height: 200px; width: 200px; background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg'); } #circle { border-radius: 50%; } </style> </head> <body> <form> <fieldset> <legend>CSS Pseudo Class</legend> <div> <div id="circle"></div> <div id="square"></div> </div> <div> <a href="#square">Tile</a> <a href="#circle">Avatar</a> </div> </fieldset> </form> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
কোনো বাটনে ক্লিক করার আগে:
'Tile' বাটনে ক্লিক করার পরে:
'Avatar' বাটনে ক্লিক করার পরে:
