CSS सेलेक्टर्स का उपयोग करके, हम अपनी पसंद के आधार पर वांछित एलिमेंट्स को विशेष रूप से स्टाइल कर सकते हैं। HTML DOM में एलिमेंट्स को चुनने के लिए विभिन्न विधियां हैं।
सिंटैक्स
CSS सेलेक्टर्स के लिए सिंटैक्स निम्नानुसार है:
Selector { /*declarations*/ }
निम्नलिखित उदाहरण एलिमेंट्स को स्टाइल करने के लिए CSS सेलेक्टर को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #one { filter: invert(85%); } </style> </head> <body> <img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"> <img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg"> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> div, p { margin: 4px; float: left; height: 200px; width: 300px; box-shadow: inset 0 2px 4px olive; background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg"); } p { background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg"); background-position: 50% 50%; color: black; } </style> </head> <body> <h2>Learning Tutorials</h2> <div></div> <p>Tutorials</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
