CSS Selectors 101: Targeting Elements with Precision

इस आर्टिकल में आप बेसिक CSS के बारें में जानेंगे और आप यह भी जानेंगे की CSS selectors का इस्तेमाल करके HTML elements को कैसे सटीक और सही तरीके से style किया जा सकता है |

CSS Selectors क्यों जरूरी हैं?-Why CSS selectors are needed

CSS selectors हमें HTML के किसी element को target कर उसपर स्टाइल (रंग ,फॉण्ट,साइज़,) अप्लाई करने में मदद करता है CSS selectors के मदद से ही हम HTML एलिमेंट को सही और सटीक स्टाइल दे पाते है | बिना सिलेक्टर के कोड को मेन्टेन करना काफी कठिनाई का काम है |

Element selector

यह सिलेक्टर HTML Element को डायरेक्ट टारगेट करता है और सारें स्टाइल अप्लाई करता है |

उदाहरण :

p {

color : red;

}

Class selector

यह सलेक्टर उन एलिमेंट को टारगेट करता है जिसका क्लास नाम डिफाइन किया गया हूँ इस सलेक्टर को टारगेट करने के लिए CSS में (.) डॉट सिंबल + क्लास नाम लिखा जाता है चलिए उदाहरण देखते है |

.highlight {

background-color : yellow;

}

इससे होगा ये की जिन - जिन एलिमेंट को class नाम highlight दिया होगा उसका बैकग्राउंड कलर yellow हो जायेगा |

ID selector

इस सलेक्टर के माध्यम से हम किसी एक यूनिक एलिमेंट को टारगेट करते है जिसका स्टाइल सिर्फ उसी एलिमेंट पर अप्लाई होता है ID selector को टारगेट करने के लिए (#) हेश सिंबल का इस्तेमाल किया जाता है | चलिए उदाहरण देखते है -

#main-title {

font-size : 20px;

}

Group selectors

जब हमें एक साथ कई सलेक्टर को स्टाइल करना होता है तब ग्रुप सलेक्टर का उपयोग किया जाता है इसे कोमा (,) से सेपरेट किया जाता है चलिए इसका उदाहरण देखते है -

h1,h2,h3, {

font-family : arial, sans-serif;

}

Descendant selectors

जब हमें किसी एलिमेंट के अन्दर वाले एलिमेंट को स्टाइल करना होता है तो उस स्थिति में इसका उपयोग किया जाता है चलिए उदाहरण से समझते है -

div p {

color : blue;

}

Basic selector priority (very high level)

इसका अर्थ यह है की जब एक ही एलिमेंट पर ID , class , universal सभी से टारगेट किया जा रहा हो तो सबसे ऊपर किसका स्टाइल को रखा जायेगा इसका क्रम कुछ इस प्रकार है -

1. Inline Style : इसके मदद से HTML टैग के अन्दर style attribute के माध्यम से स्टाइलिंग किया जाता है |

2. ID Selector :

3. Class Selector :

4. Element Selector:

5. Universal Selector :

inline>ID>Class>Element

निष्कर्ष :

CSS Selectors 101: Targeting Elements with Precision के इस ब्लॉग में आपने सिखा की किसी html एलिमेंट को कैसे सही और सटीक तरीके से टारगेट किया जाता है और किस सलेक्टर की प्रायोरिटी सबसे ऊपर होता है ?