আমরা একটি এলিমেন্টের নির্দিষ্ট অংশ যেমন first-letter, first-line বা এর আগে/পরে কন্টেন্ট যোগ করতে পারি। এই উদ্দেশ্যে CSS Pseudo Elements ব্যবহার করা হয়।
নোট - CSS3-এ CSS Pseudo Classes থেকে Pseudo Elements আলাদা করার জন্য, pseudo elements ডাবল-কোলন নোটেশন ব্যবহার করে।
সিনট্যাক্স
একটি এলিমেন্টে CSS Pseudo elements ব্যবহারের সিনট্যাক্স নিম্নরূপ:
Selector::pseudo-element { css-property: /*মান*/; }
উপলব্ধ সব CSS Pseudo Elements নিম্নরূপ:
| ক্রমিক নং | Pseudo Element ও বর্ণনা |
|---|---|
| 1 | after উল্লেখিত প্রতিটি এলিমেন্টের কন্টেন্টের পরে কিছু যোগ করে |
| 2 | before উল্লেখিত প্রতিটি এলিমেন্টের কন্টেন্টের আগে কিছু যোগ করে |
| 3 | first-letter উল্লেখিত প্রতিটি এলিমেন্টের প্রথম অক্ষর সিলেক্ট করে |
| 4 | first-line উল্লেখিত প্রতিটি এলিমেন্টের প্রথম লাইন সিলেক্ট করে |
| 5 | placeholder ফর্ম এলিমেন্টের প্লেসহোল্ডার টেক্সট সিলেক্ট করে |
| 6 | selection ব্যবহারকারী দ্বারা সিলেক্ট করা একটি এলিমেন্টের অংশ সিলেক্ট করে |
CSS Pseudo Elements এর একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> p::first-letter { background-color: black; } p::first-line { background-color: lightgreen; color: white; } span { font-size: 2em; color: #DC3545; } </style> </head> <body> <h2>Computer Networks</h2> <p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p> </body> </html>
আউটপুট
CSS Pseudo Elements এর আরেকটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after { content: " LEGEND!"; background: orange; padding: 5px; } div:nth-of-type(2) p:nth-child(2)::before { content: "Book:"; background-color: lightblue; font-weight: bold; padding: 5px; } </style> </head> <body> <div> <p>Cricketer</p> <p>Sachin Tendulkar:</p> </div> <hr> <div> <p><q>Chase your Dreams</q></p> <p><q>Playing It My Way</q></p> </div> </body> </html>
আউটপুট
