সিএসএস নির্বাচকরা একটি প্রদত্ত প্যাটার্নের প্রতিটি উপাদানের সাথে মিল করে HTML উপাদান নির্বাচন করতে ব্যবহৃত হয়। আমরা নির্বাচকের ভিতরে সম্পত্তি এবং তাদের মান ঘোষণা করে শৈলীগুলি সংজ্ঞায়িত করি৷
সিনট্যাক্স
শৈলী ঘোষণার জন্য সিনট্যাক্স নিম্নরূপ -
Selector {
property: value; } CSS-এ সাধারণ নির্বাচক, বৈশিষ্ট্য নির্বাচক, ছদ্ম-শ্রেণি, ছদ্ম-উপাদান এবং স্ট্যান্ডার্ড কম্বিনেটরের মাধ্যমে নির্বাচকদের সমন্বয় রয়েছে। নিচের সারণীতে কিছু নির্বাচকদের তালিকা করা হয়েছে −
| নির্বাচক | নির্বাচকের ধরন | বিবরণ |
|---|---|---|
| * | ইউনিভার্সাল সিলেক্টর | সমস্ত উপাদান মেলে |
| e | টাইপ নির্বাচক | ই টাইপের সমস্ত উপাদান মেলে |
| e1e2 | বংশীয় নির্বাচক | যেকোনও e2 উপাদানের সাথে মেলে যা একটি e1 উপাদানের বংশধর৷ |
| e1>e2 | শিশু নির্বাচক | যেকোনো e2 এলিমেন্টের সাথে মেলে যেটি e1 এলিমেন্টের চাইল্ড। |
| e[bar="demo"] | অ্যাট্রিবিউট নির্বাচক | যেকোন ই এলিমেন্টের সাথে মেলে যার "বার" অ্যাট্রিবিউটের মান ঠিক "ডেমো" এর সমান। |
| #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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
