CSS Selectors

Selectors वह तरीका हैं जिनसे CSS को वह exact HTML मिलता है जिसे आप style करना चाहते हैं। specific elements को point करने का कोई तरीका न हो, तो हर style एक साथ पूरे page पर लागू होना पड़ेगा, जो किसी असली site के लिए साफ़ तौर पर काम नहीं करेगा। CSS elements को select करने के कई तरीके देता है: उनके tag name से (हर paragraph), आपके खुद जोड़े गए किसी class से (कोई भी element जो card के रूप में marked है), किसी unique ID से (एक specific element), या selectors को combine करके elements को page की structure में उनकी जगह के आधार पर target करके। Selectors के साथ सहज हो जाना CSS के सबसे बड़े unlocks में से एक है, क्योंकि बाकी लगभग सब कुछ इस पर बना है कि आप cookiescursor.com जैसी किसी site पर वही चीज़ precisely target कर पाएँ जिसे आप style करना चाहते हैं।

In this page:

Element Selectors
Class Selectors
ID Selectors
Universal और Grouped Selectors
Combinators (Descendant और Child)

Syntax

css

element { }         /* type */
.class-name { }     /* class */
#id-name { }        /* id */
* { }              /* all */
selector1, selector2 { }

Element Selectors

एक element selector किसी दिए गए HTML tag के हर instance को target करता है, बस उसके आगे बिना किसी dot या hash के tag name लिखकर। क्योंकि element selectors इतने broad होते हैं, वे one-off exceptions के बजाय base styling के लिए ज़्यादा बेहतर हैं।

Note: Element selectors broad, page-wide defaults के लिए बहुत अच्छे हैं, जैसे हर paragraph पर एक base font set करना।

Warning: एक element selector पूरे page पर matching हर tag को असर करता है, जो किसी बड़ी site पर आपकी सोच से ज़्यादा wider असर डाल सकता है।

उदाहरण: Element Selectors

css

<style>
p {
  font-family: sans-serif;
}
</style>
<p>Every paragraph on the page gets this style</p>

Class Selectors

एक class selector एक dot से शुरू होता है और किसी भी ऐसे element को match करता है जिसके class attribute में वह class हो। एक ही class को जितने चाहें उतने elements पर reuse किया जा सकता है। असली projects में classes सबसे common selector type हैं, ठीक इसी reusability की वजह से।

Note: किसी भी reusable चीज़ के लिए पहले class selectors का इस्तेमाल करें, जैसे एक card, एक button, या एक badge जो कई जगहों पर दिखता है।

Warning: एक element एक साथ कई classes ले जा सकता है, spaces से अलग करके, जो कभी-कभी उन लोगों को हैरान कर देता है जो सोचते हैं कि हर element पर सिर्फ एक ही class होती है।

उदाहरण: Class Selectors

css

<style>
.card {
  border: 1px solid #ccc;
}
</style>
<div class="card">Card 1</div>
<div class="card">Card 2</div>

ID Selectors

एक ID selector एक hash symbol से शुरू होता है और page पर उस exact ID वाले एक ही element को match करता है। IDs unique होने के लिए बनी हैं, classes के उलट, जो repeat हो सकती हैं। इसी uniqueness rule की वजह से, IDs को रोज़मर्रा की styling के बजाय page anchors और JavaScript hooks के लिए बचाकर रखना बेहतर है।

Note: IDs को उन elements के लिए बचाएँ जो page पर सच में एक ही तरह के हैं, जैसे एक main navigation bar या कोई specific unique widget।

Warning: ID selectors class selectors से ज़्यादा weight रखते हैं जब styles conflict करते हैं, जो उन्हें बाद में override करना मुश्किल बना सकता है।

उदाहरण: ID Selectors

css

<style>
#main-nav {
  background: navy;
}
</style>
<nav id="main-nav">Navigation</nav>

Universal और Grouped Selectors

Universal selector (एक अकेला asterisk) page के हर element को match करता है, और grouped selectors कई selectors को commas से combine करते हैं ताकि वे सभी एक declaration block share करें।

'.a, .b, #c' जैसे दोनों को combine करना किसी stylesheet को compact रखने का एक common तरीका है जब कई असंबंधित elements को identical treatment चाहिए होता है।

Note: Universal selector quick resets के लिए काम का है, जैसे अपना खुद का spacing system बनाने से पहले default margin और padding हटाना।

Warning: Simple resets से आगे किसी भी चीज़ के लिए universal selector इस्तेमाल करना गलती से उन elements को style कर सकता है जिन्हें आपने कभी छूने का इरादा नहीं किया था।

उदाहरण: Universal and Grouped Selectors

css

<style>
* {
  margin: 0;
  padding: 0;
}
.a, .b, #c {
  color: red;
}
</style>
<div class="a">A</div>
<div class="b">B</div>
<div id="c">C</div>

Combinators (Descendant और Child)

Combinators selectors के बीच relationships describe करते हैं। दो selectors के बीच एक space का मतलब है 'कोई भी descendant', जबकि एक greater-than sign का मतलब है 'सिर्फ एक direct child'। यह अंतर समझना ज़रूरी है ताकि यह control किया जा सके कि कोई style nested markup में कितना गहरा पहुँचे।

Note: जब आप specifically deeply nested elements को गलती से style करने से बचना चाहें, तो direct child combinator इस्तेमाल करें।

Warning: एक descendant selector (बस एक space) कई levels गहराई तक elements को match कर सकता है, सिर्फ उन immediate children को नहीं जिनकी आप शायद कल्पना कर रहे हों।

उदाहरण: Combinators (Descendant and Child)

css

<style>
.card p {
  color: gray;
}
.card > span {
  color: blue;
}
</style>
<div class="card">
  <p>Descendant paragraph</p>
  <span>Direct child span</span>
</div>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Syntax Next Lesson → CSS How To