Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS में एलिमेंट टाइप सिलेक्टर


CSS एलिमेंट टाइप सिलेक्टर का उपयोग किसी प्रकार के सभी एलिमेंट्स को सिलेक्ट करने के लिए किया जाता है। CSS एलिमेंट टाइप सिलेक्टर का सिंटैक्स निम्नलिखित है:

सिंटैक्स

element { /*declarations*/ }

उदाहरण

निम्नलिखित उदाहरण CSS एलिमेंट टाइप सिलेक्टर को दर्शाते हैं:

<!DOCTYPE html> <html> <head> <style> li { list-style: none; margin: 5px; border-bottom-style: dotted; } div { box-shadow: inset 0 0 8px plum; padding: 36px; } </style> </head> <body> <div> <pre> \(╪)(╪) /</pre> <ul> <li></li> <li></li> </ul> </div> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है:

CSS में एलिमेंट टाइप सिलेक्टर

उदाहरण

<!DOCTYPE html> <html> <head> <style> li { text-align: center; list-style: none; margin: 5px; padding: 5px; box-shadow: inset 0 0 15px yellowgreen; } div { box-shadow: inset 0 0 8px orange; padding: 36px; width: 30%; border-radius: 50%; } </style> </head> <body> <div> <ul> <li>Hello</li> <li>Guys</li> </ul> </div> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है:

CSS में एलिमेंट टाइप सिलेक्टर

  1. CSS चाइल्ड सेलेक्टर CSS चाइल्ड सेलेक्टर

    ) का उपयोग चाइल्ड सेलेक्टर parent > child केवल उन एलिमेंट्स को सिलेक्ट करता है जो निर्दिष्ट पैरेंट के **तत्काल (डायरेक्ट) चाइल्ड** होते हैं। यह डिसेंडेंट सेलेक्टर (स्पेस) से अलग है जो सभी नेस्टेड डिसेंडेंट्स को सिलेक्ट करता है। सिंटैक्स div > p उदाहरण <!DOCTYPE html> <html> <

  1. CSS से एलिमेंट को वर्टिकली सेंटर करें CSS से एलिमेंट को वर्टिकली सेंटर करें

    पैडिंग का उपयोग करके वर्टिकल सेंटरिंग एक सरल तरीका है पैरेंट कंटेनर पर समान टॉप और बॉटम पैडिंग देना, जिससे चाइल्ड कंटेंट वर्टिकली सेंटर हो जाता है। यह तब काम करता है जब चाइल्ड की ऊंचाई निश्चित या छोटी हो। उदाहरण <!DOCTYPE html> <html> <head> <style> .center {

  1. CSS डिसेंडेंट सेलेक्टर CSS डिसेंडेंट सेलेक्टर

    डिसेंडेंट कॉम्बिनेटर (स्पेस) का उपयोग डिसेंडेंट सेलेक्टर ancestor descendant (स्पेस से अलग) उस पैरेंट के **अंदर सभी नेस्टेड लेवल्स पर** मौजूद निर्दिष्ट टाइप के एलिमेंट्स को सिलेक्ट करता है, न कि केवल डायरेक्ट चाइल्ड्स को। उदाहरण <!DOCTYPE html> <html> <head> <style>