CSS ग्रुपिंग सिलेक्टर का उपयोग कई एलिमेंट्स को सिलेक्ट करके उन्हें एक साथ स्टाइल करने के लिए किया जाता है। यह कोड और प्रत्येक एलिमेंट के लिए कॉमन स्टाइल्स घोषित करने के अतिरिक्त प्रयास को कम करता है। सिलेक्टर्स को ग्रुप करने के लिए, प्रत्येक सिलेक्टर को कॉमा से अलग किया जाता है।
सिंटैक्स
CSS ग्रुपिंग सिलेक्टर का सिंटैक्स निम्नलिखित है:
element, element { /*declarations*/ }निम्नलिखित उदाहरण CSS ग्रुपिंग सिलेक्टर को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> article, p, img { display: block; margin: auto; text-align: center; border-bottom: double orange; } </style> </head> <body> <article>Demo Text</article> <p>This is demo text.</p> <br/> <img src="https://www.tutorialspoint.com/swing/images/swing.jpg"> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
<!DOCTYPE html> <html> <html> <head> <style> div::after,p::after{ content: "Demo text"; margin: 4px; box-shadow: inset 0 0 4px darkorange; } </style> </head> <body> <div></div> <p>This is example text.</p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
