ছদ্ম-শ্রেণী
একটি ছদ্ম-শ্রেণী একটি নির্বাচকের অবস্থাকে প্রতিনিধিত্ব করে যেমন :হোভার, :সক্রিয়, :শেষ-শিশু ইত্যাদি। এগুলি একটি একক কোলন (:) দিয়ে শুরু হয়।
CSS সিউডো-ক্লাসের সিনট্যাক্স নিম্নরূপ -
:pseudo-class{
attribute: /*value*/
} ছদ্ম-উপাদান
একইভাবে, একটি ছদ্ম-উপাদান ভার্চুয়াল উপাদান নির্বাচন করতে ব্যবহার করা হয় যেমন ::পরে, ::পূর্বে, ::প্রথম লাইন, ইত্যাদি।
এগুলি একটি ডাবল কোলন (::) দিয়ে শুরু হয়।
CSS সিউডো-এলিমেন্টের সিনট্যাক্স নিম্নরূপ -
::pseudo-element{
attribute: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি সিএসএস সিউডো-ক্লাস এবং ছদ্ম-উপাদান সম্পত্তিকে চিত্রিত করে৷
<!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> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
