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>आउटपुट
यह निम्नलिखित आउटपुट देता है:
