এই CSS Pseudo Element একটি এলিমেন্টের কন্টেন্টের প্রথম অক্ষরকে সিলেক্ট করে। তবে, এটি কাজ করে না যদি এলিমেন্টটি ইনলাইন-লেভেল হয়।
উদাহরণ
CSS ::first-letter pseudo element এর একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <style> div{ background-color: #32485d; border: 5px solid black; color: #959799; } p::first-letter { font-size: 1.5em; color: #f9f9f9; padding: 2px; } </style> </head> <body> <div> <h2>Eclipse IDE</h2> <p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
আরেকটি উদাহরণ
CSS ::first-letter pseudo element এর আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <style> p::first-letter { font-size: 1.5em; background-color: black; color: #dc3545; padding: 2px; } </style> </head> <body> <div> <h2>Machine Learning Tutorials</h2> <p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
