CSS सेलेक्टर्स का उपयोग दिए गए पैटर्न से प्रत्येक एलिमेंट का मिलान करके HTML एलिमेंट्स को चुनने के लिए किया जाता है। हम प्रॉपर्टी और उनके मान को सेलेक्टर के अंदर घोषित करके स्टाइल्स को परिभाषित करते हैं।
सिंटैक्स
स्टाइल्स घोषित करने के लिए सिंटैक्स निम्नानुसार है:
Selector { property: value; }
CSS में सिंपल सेलेक्टर्स, एट्रिब्यूट सेलेक्टर्स, स्यूडो-क्लासेज, स्यूडो-एलिमेंट्स और मानक कॉम्बिनेटर्स के माध्यम से सेलेक्टर्स का संयोजन होता है। निम्नलिखित टेबल कुछ सेलेक्टर्स को सूचीबद्ध करती है:
| सेलेक्टर | सेलेक्टर का प्रकार | विवरण |
|---|---|---|
| * | यूनिवर्सल सेलेक्टर | सभी एलिमेंट्स से मेल खाता है |
| e | टाइप सेलेक्टर | टाइप e के सभी एलिमेंट्स से मेल खाता है |
| e1 e2 | डिसेंडेंट सेलेक्टर | किसी भी e2 एलिमेंट से मेल खाता है जो e1 एलिमेंट का डिसेंडेंट है। |
| e1>e2 | चाइल्ड सेलेक्टर | किसी भी e2 एलिमेंट से मेल खाता है जो एलिमेंट e1 का चाइल्ड है। |
| e[bar="demo"] | एट्रिब्यूट सेलेक्टर | किसी भी e एलिमेंट से मेल खाता है जिसका "bar" एट्रिब्यूट मान बिल्कुल "demo" के बराबर है। |
| #id | ID सेलेक्टर | ID "id" के बराबर वाले एलिमेंट से मेल खाता है। |
उदाहरण
निम्नलिखित उदाहरण CSS सेलेक्टर्स को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline black; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline red; } span { font-size: 1.4em; } #demo { box-shadow: inset 0 0 20px orange; } </style> </head> <body> <h2>Student Details</h2> <p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
