CSS ব্যবহার করে সিবলিং এলিমেন্ট সিলেক্ট করা

আমরা অ্যাডজেসেন্ট সিবলিং সিলেক্টর (+) ব্যবহার করি, যদি আমরা সেই এলিমেন্টকে ম্যাচ করতে চাই যা প্রথম সিলেক্টরের সাথে সাথে থাকে। এখানে দুটি সিলেক্টর একই পেরেন্টের চাইল্ড।

CSS অ্যাডজেসেন্ট সিবলিং কম্বিনেটরের সিনট্যাক্স নিচের মতো −

Selector + Selector{ attribute: /*value*/ }

যদি আমরা একই পেরেন্টের সিবলিংস সিলেক্ট করতে চাই, দ্বিতীয় এলিমেন্টের পজিশন নির্বিশেষে, তবে CSS জেনারেল সিবলিং কম্বিনেটর ব্যবহার করি।

CSS জেনারেল সিবলিং কম্বিনেটরের সিনট্যাক্স নিচের মতো −

Selector ~ Selector{ attribute: /*value*/ }

নিচের উদাহরণগুলো CSS অ্যাডজেসেন্ট এবং জেনারেল সিবলিং কম্বিনেটর প্রোপার্টি প্রদর্শন করে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> #parent {    display: flex;    margin: 2%;    padding: 2%;    box-shadow: inset 0 0 24px cyan;    justify-content: space-around; } div + p {    font-size: 1.2em;    font-weight: bold;    background: powderblue; } section {    box-shadow: 0 0 3px rgba(0,0,0,0.8); } </style> </head> <body> <div id="parent"> <img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU EVhwrT-kM5ogBqKM" /> <div> <p>Check this</p> <section><p>Some text in section</p></section> <span>hello</span> </div> <p>Selected</p> </div> </body> </html>

আউটপুট

এটি নিচের ফলাফল দেবে −

উদাহরণ

<!DOCTYPE html> <html> <head> <style> #parent {    display: flex;    margin: 2%;    padding: 2%;    background: thistle;    justify-content: space-between; } section ~ p {    text-align: center;    font-size: 1.2em;    font-weight: bold;    background: lavender; } </style> </head> <body> <div id="parent"> <img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU EVhwrT-kM5ogBqKM" /> <div> <p>Random text 1</p> <section><p>Some text in section</p></section> <span>hello</span> <p>Selected</p> </div> <img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" /> </div> </body> </html>

আউটপুট

এটি নিচের ফলাফল দেবে −