Pseudo-Class
একটি সিউডো-ক্লাস একটি সিলেক্টরের অবস্থা প্রকাশ করে যেমন :hover, :active, :last-child, ইত্যাদি। এগুলো একক কোলন (:) দিয়ে শুরু হয়।
CSS pseudo-class-এর সিনট্যাক্স নিচে দেওয়া হলো:
:pseudo-class{ attribute: /*value*/ }Pseudo-Element
একইভাবে, একটি সিউডো-এলিমেন্ট ভার্চুয়াল উপাদান সিলেক্ট করতে ব্যবহৃত হয় যেমন ::after, ::before, ::first-line, ইত্যাদি।
এগুলো ডবল কোলন (::) দিয়ে শুরু হয়।
CSS pseudo-element-এর সিনট্যাক্স নিচে দেওয়া হলো:
::pseudo-element{ attribute: /*value*/ }উদাহরণ
নিচের উদাহরণগুলো CSS pseudo-class এবং pseudo-element প্রপার্টি ব্যাখ্যা করে।
<!DOCTYPE html> <html> <head> <style> a:hover{ padding: 3%; font-size:1.4em; color: tomato; background: bisque; } </style> </head> <body> <p>You're somebody else</p> <a href=#>Dummy link 1</a> <a href=#>Dummy link 2</a> </body> </html>আউটপুট
এটি নিচের ফলাফল দেবে:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> p::after { content: " BOOM!"; background: hotpink; } p:last-child { font-size: 1.4em; color: red; } </style> </head> <body> <p>Anymore Snare?</p> <p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p> <p>Hit</p> <p>Pop</p> </body> </html>আউটপুট
এটি নিচের ফলাফল দেবে:
