সিউডো ইলিমেন্ট (Psudo Element)

সিউডো ক্লাসের মতই বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ইলিমেন্ট ব্যবহার করা হয়।সিউডো ইলিমেন্ট এর সিনট্যাক্স হচ্ছে selector:pseudo-element {property:value;} । সি এস এস ক্লাস সিলেক্টরও সিউডো ইলিমেন্ট এর সাথে ব্যবহার করা যায়, এক্ষেত্রে সিনট্যাক্স হবে selector.class:pseudo-element {property:value;} । কোন প্যারাগ্রাফের প্রথম অক্ষর বা প্রথম লাইন কেমন দেখাবে তা সিউডো ইলিমেন্ট দ্বারা নির্ধারণ করা হয়। এছাড়া কোন প্যারাগ্রাফ বা হেডিং এর শুরুতে কোন ইমেজ, বা বিশেষ কোন টেক্সট যুক্ত করা সহ আরো অনেক ধরণের কাজ সিউডো ইলিমেন্ট দ্বারা করা যায়।

বিভিন্ন ধরণের সিউডো ইলিমেন্ট

প্রথম অক্ষর সিউডো ইলিমেন্ট-(First letter Pseudoelement)
প্রথম লাইন সিউডো ইলিমেন্ট-(First first line Pseudoelement)
বিফোর সিউডো ইলিমেন্ট (Before Pseudo element)
আফটার সিউডো ইলিমেন্ট (After Pseudo element)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p:after{
content:"Thank You";
background-color:#900;
color:#FCC;
font-weight:bold;}
h2:after {content:url(http://tutohost.com/images/services-icons/green.png);}
h2:first-letter
{color:#ff0000;
font-size:70px;}
</style>
</head>
<body >
<h2>WWW.TUTOHOST.COM</h2>
<p>
www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।