CSS সিলেক্টর HTML এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয় যা একটি দেওয়া প্যাটার্নের সাথে প্রতিটি এলিমেন্ট ম্যাচ করে। আমরা সিলেক্টরের ভিতরে প্রপার্টি এবং তাদের মান ডিক্লেয়ার করে স্টাইল সংজ্ঞায়িত করি।
সিনট্যাক্স
স্টাইল ডিক্লেয়ার করার সিনট্যাক্স নিম্নরূপ:
Selector { property: value; }
CSS-এ সিম্পল সিলেক্টর, অ্যাট্রিবিউট সিলেক্টর, প্সিউডো-ক্লাস, প্সিউডো-এলিমেন্ট এবং স্ট্যান্ডার্ড কম্বিনেটর দিয়ে সিলেক্টরের কম্বিনেশন থাকে। নিচের টেবিলে কিছু সিলেক্টর লিস্ট করা হলো:
| সিলেক্টর | সিলেক্টর টাইপ | বর্ণনা |
|---|---|---|
| * | ইউনিভার্সাল সিলেক্টর | সব এলিমেন্ট ম্যাচ করে |
| e | টাইপ সিলেক্টর | টাইপ e-এর সব এলিমেন্ট ম্যাচ করে |
| e1e2 | ডিসেন্ডেন্ট সিলেক্টর | যে কোনো e2 এলিমেন্ট যা একটি e1 এলিমেন্টের ডিসেন্ডেন্ট। |
| e1>e2 | চাইল্ড সিলেক্টর | যে কোনো e2 এলিমেন্ট যা একটি e1 এলিমেন্টের চাইল্ড। |
| e[bar="demo"] | অ্যাট্রিবিউট সিলেক্টর | যে কোনো e এলিমেন্ট যার "bar" অ্যাট্রিবিউট মান একদম "demo"। |
| #id | ID সিলেক্টর | "id" সমান ID সহ এলিমেন্ট ম্যাচ করে। |
উদাহরণ
নিচের উদাহরণগুলো CSS সিলেক্টর উদাহরণ দেয়:
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline black; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline red; } span { font-size: 1.4em; } #demo { box-shadow: inset 0 0 20px orange; } </style> </head> <body> <h2>Student Details</h2> <p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
