CSS অ্যাডজেসেন্ট সিবলিং সিলেক্টর একটি এলিমেন্টের সन्नিকট সিবলিং সিলেক্ট করতে ব্যবহৃত হয়। এটি শুধুমাত্র সেই এলিমেন্টগুলো সিলেক্ট করে যা প্রথম সিলেক্টরের তাত্ক্ষণিক পরে থাকে।
সিনট্যাক্স
CSS অ্যাডজেসেন্ট সিবলিং সিলেক্টরের সিনট্যাক্স নিচের মতো:
element + element { /*declarations*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS অ্যাডজেসেন্ট সিবলিং সিলেক্টর ব্যাখ্যা করে:
<!DOCTYPE html> <html> <head> <style> div { margin: 8px; height: 50px; width: 60px; display: flex; float: left; border-radius: 5%; border: 2px solid brown; box-shadow: inset 0 2px 12px olivedrab; } div + div { border-radius: 50%; background-color: orchid; } </style> </head> <body> <div></div> <hr> <div></div> <div></div> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> p { font-size: 1.5em; } span { background-color: lavender; } span + span { background-color: darkseagreen; } </style> </head> <body> <p> <span>Demo text</span> <span>goes here</span> </p> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
