CSS Selectors क्या है? CSS Selectors

CSS Selectors क्या हैं  और यह कैसे काम करता है और CSS Selector कितने प्रकार के होते है और CSS Selector की मदद से आप कैसे एक वेबसाइट को रेस्पोंसिव डिजाईन कर सकते है, CSS Selector जो की CSS का महत्वपूर्ण अंग है जिसकी मदद से हम किसी के Html Document के किसी भी हिस्से को डिजाईन कर बेहतरीन डिजाईन दे सकते है।

हमने आपको इस ब्लॉग के जरिये CSS सिखाना शुरू किया है जिसके हम 2 आर्टिकल्स प्रकाशित कर चुके है, जिसमे कस क्या होती है और उसके बारे में पूरी जानकारी के लिए यह CSS क्या है CSS कैसे सीखे पोस्ट को पढ़े और CSS Media Queries क्या है यह पोस्ट पढ़े।

एक HTML Document के विभिन्न भाग होते हैं जिसके बारे में आपको बता चूका हूँ जिसे  Simple HTML Document को Header, Body, Sidebar, Footer आदि भागों (Divisions) में बांट सकते हैं और हम किसी Webpage पर CSS Rule को Apply करते हैं हर भाग के अलग-अलग CSS Rule Declare किए जाते हैं जिसको सेलेक्ट करके हम उसको डिजाईन कर सकते है।

HTML Document के विभिन्न भागो को सेलेक्ट करने के लिए CSS Selectors का उपयोग किया जाता हैं, CSS Selector के बहुत टाइप्स होते है जो हमे वेब्पगे पेज को डिजाईन करने का पूरा नियंत्रण प्रदान करते है।

• Android Moded Games और Moded Apps कैसे डाउनलोड करें?
• Blogging क्या है कैसे करते है? ब्लॉग्गिंग करने के फायदे

अभी आपके दिमाग सवाल उठ रहे होगे की CSS Selector क्या हैं – What is CSS Selector in Hindi? CSS Selector के विभिन्न प्रकार – Types of CSS Selector? आदि की Basic जानकारी देने वाले हैं जिसको हमने छोटे-छोटे पार्ट्स में बांटा है जिससे आपको समझने में ज्यादा आसानी होगी।

CSS Selector क्या हैं – What is CSS Selector in Hindi?

CSS Selectors का उपयोग हम Content को सेलेक्ट करने लिए करते है हमे जिस भी Content को CSS की मदद से स्टाइल देना होता है उसको CSS Selectors की मदद से हम सेलेक्ट कर सकते है और अपने हिसाब से डिजाईन कर सकते है, Selectors CSS रूल्स को हम Id, Class, Type और Attributes के अनुसार सेलेक्ट करते है।

आसान शब्दों में बात करें तो Css File के स्टाइल रूल्स (Syntax) में सबसे पहले Html के जिस Elements पर आपको Css Style करना होता है उससे सेलेक्ट करने के लिए हम उससे CSS Selectors की मदद से डिजाईन करते है जो की आपके Html File का Tag Name, Class Name, Id Name और Attributes का उपयोग करते है इससे ही हम CSS Selectors कहते है।

Css में आपको Expert होना है तो जरुरी है की CSS Selectors की पूरी जानकारी होना बहुत जरुरी है क्युकि किसी भी रूल्स को हम उसके CSS Selector की मदद से ही डिजाईन करते है, CSS Selector को सेलेक्ट करके आप उसमे अलग-अलग Properties और Values Define कर सकते है और आसानी से वेबपेज को डिजाईन कर सकते है।

Introduction to CSS Selectors In Hindi: CSS Selector का बहुत बड़ा रोल होता है अगर CSS लैंग्वेज सीखना चाहते है, क्युकि CSS Selectors की मदद से आप आपने html के किसी भी पार्ट के सेलेक्ट और डिजाईन कर सकते है।

Different Types Of CSS Selectors In Hindi

Css Selectors को वेब मास्टर अपने हिसाब से उपयोग करता है क्या आपको पता है CSS विभिन्न प्रकार के Selectors Provide कराती हैं, जिनसे Web Masters को Flexibility मिलती हैं अभी में आपको नीचे आपको Css Selectors कितने प्रकार के होते है और इन्हें इस्तेमाल कैसे करें? के बारे में बताया जा रहा हैं।

1. The Type or Element Selectors

यह एक प्रकार का Particular HTML Element होता है जिसमें आप Html Tag को ही बना देते है और उस अपने Css Rules को अप्लाई करते है, जैसा की आप निचे एक उदाहरण में देख सकते है की हम p को Selector बनाया है जिससे यह Css Rule पुरे पैराग्राफ पर अप्लाई हो जायेगा।

Element Selectors Example
p {
color:orange;
}

2. The Universal Selectors

Universal Selector में Define की गयी स्टाइल सभी Html पर लागू हो जाती है तभी इससे Universal Selectors के नाम से जाना जाता है, मतलब की वो Elements भी इससे स्टाइल हो जाता है जिसको डिजाईन नहीं किया गया हो, Universal Selectors को Airstrike (*) से  Represent करते है जिसका उदाहरण आप निचे देख सकते है।

* {
color:orange;
}

3. The Class Selectors

Class एक Global Attribute होता है जिसे आप CSS Selector के तोर पर उपयोग करके उससे डिजाईन कर सकते है Elements में Class Attribute द्वारा Class Define करते है जिसके लिए हम Class के नाम के पहले Dot लगाकर Class लिखते है और Css Rules के रूप में डिफाइन कर सकते है।

.classname {
color:orange;
}

और अगर आप किसी Class को पर्टिकुलर एलेमेंट्स के लिए डिजाईन करना चाहते है तो कुछ इस तरह से आप डिजाईन कर सकते है, आप Class को बहुत बार एक CSS फाइल में अलग अलग जगह विभिन एलेमेंट्स को डिजाईन करने के लिए भी उपयोग कर सकते है।

.header.classname {
color:orange;}


4. The ID Selectors

Class की तरह यह भी एक Global Attribute होता है जिससे आप आसानी से डिजाईन कर सकते है, ID को नोर्मल्ली Class के साथ जोड़ा जाता है जो की एक यूनिक ID होता है इससे Css में डिफाइन करने के लिए आप ID के आगे # “Hash” लिखकर उससे अपनी Css फाइल में डिफाइन कर सकते है जिसका एग्जामपल कुछ इस तरह से है।

ID Selectors Example
#idname {
color:orange;
}

5. The Attribute Selectors

आपने फॉर्म और लॉग इन पेज या फिर सब्सक्राइब बॉक्स में इसे जरुर देखा होगा, Class और ID भी Attribute ही हैं पर उन्हें नाम देना पड़ता है पर Attribute Selector में Element के Particular Attribute को Selector के लिए चुनते हैं जिसमे Css Type देकर उसके अलग-अलग Action को Css के रूप में हम डिफाइन कर सकते है।

6. Descendant Selectors or Sub-selectors

यह सिखने लायक चीज़ है क्यूंकि इसमें आप कम रूल्स में ज्यादा काम कर सकते है, जिसके बारे में आपको Group Selector में भी बताने वाला हु, इसमें आप कुछ इस तरह का Css Rule दे सकते है जिसमे किसी ख़ास एलिमेंट में उपयोग होने वाले Element को Design कर सकते है जिससे किसी अन्य डिजाईन पर कोई भी फरक नहीं पड़ेगा सिर्फ सिलेक्टेड पर ही उसका स्टाइल देखने को मिलेगा।

li b {
color:orange;
}

ऊपर आप देख सकते है की Li (List) में जो भी B (Bold) Text होगा उस पर यह Css रूल अप्लाई हो जायेगा।

7. Group Selectors

मान लो आपको Footer के बैकग्राउंड कलर और Header के कलर को Red करना है तो आपको अलग-अलग से उससे रूल करने की जरुरत नहीं है आप ग्रुप में एक साथ बहुत सारी Class और Id को Define कर सकते है, इससे आपकी कम समय में ज्यादा रूल्स को एक साथ स्टाइल कर पायेंगे, उदाहरण के लिए यह देखिये आपको हर एक सिलेक्टर के बाद कोमा का इस्तेमाल करें।

h1, p, header, footer{
color:red;
}

ग्रुप सिलेक्टर की मदद से आप अपनी Css File को Compress कर सकते है मतलब की आप बहुत कम रूल में वेबसाईट को डिजाईन कर सकते है, आज का लेख आपके लिए मददगार जरुर साबित होगा अगर आप Css सिखने के इन्चुक है।

आज के पोस्ट में आपन सिखा की CSS Selectors की पूरी जानकारी हिंदी में दी है और CSS Selectors क्या होता हैं? CSS Selectors के कितने प्रकार होते हैं? इसके अलावा आपने Multiple Style Rule Declare करना और Selectors को Grouping करना भी आपने सीखा हैं जो बहुत मददगार साब्दित होगा।

मुझे उम्मीद है आपको यह लेख पसंद आया होगा अगर आपको इसी तरह के और लेख पढने है तो हमे कमेंट्स में जरुर बताएं।