CSS जनरल सिबलिंग सिलेक्टर का उपयोग उन सभी एलिमेंट्स को सिलेक्ट करने के लिए किया जाता है जो पहले एलिमेंट का अनुसरण करते हैं जैसे कि दोनों उसी पैरेंट के बच्चे हैं।
सिंटैक्स
CSS जनरल सिबलिंग सिलेक्टर का सिंटैक्स निम्नलिखित है:
element ~ element { /*declarations*/ }निम्नलिखित उदाहरण CSS जनरल सिबलिंग सिलेक्टर को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> * { float: left; padding-left: 14px; list-style: none; } p ~ ul { box-shadow: inset 4px 0 3px lime; } </style> </head> <body> <ul> <li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li> </ul> <p>We provide learning tutorials, quizzes and video tutorials.</p> <ul> <li>Tutorials on databases and programming languages.</li> <li>Quizzes to check knowledge of databases and languages.</li> <li>Video Tutorials to easily understand the technologies.</li> </ul> <ul> <li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li> <li><img src="https://www.tutorialspoint.com/images/db2.png"></li> <li><img src="https://www.tutorialspoint.com/images/sql.png"></li> </ul> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
<!DOCTYPE html> <html> <head> <style> * { float: left; padding: 10px; list-style: none; } img ~ p { background-color: burlywood; } </style> </head> <body> <p>This is demo text.</p> <img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg"> <p>Learn Big Data Analytics at no cost.</p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
