Theory
Postman की दुविधा
कल्पना कीजिए आप अपनी personal portfolio website बना रहे हैं। आपके पास text के दस अलग paragraphs हैं, पर आप चाहते हैं कि केवल आपके Contact section में अकेला paragraph एक चमकीला red background पाए। अगर आप generic paragraph tag को सीधे style करते हैं, आपके पूरे homepage भर सारे दस paragraphs red हो जाते हैं! आप browser को बिल्कुल कैसे बताएँ कि किस element को style करना है बिना हर एक HTML tag में गंदे inline styles copy-paste किए? आप CSS selectors इस्तेमाल करते हैं, जो आपके web page components के लिए सटीक mailing addresses की तरह काम करते हैं।
Theory
College Hostel Directory
अपने HTML document को एक college campus hostel की तरह सोचिए। एक Element selector चिल्लाने जैसा है: 'ध्यान दीजिए, सारे BCA students!' उस category में हर कोई जवाब देता है। एक Class selector पुकारने जैसा है: 'Cricket Team के सारे सदस्य!' (अलग कमरों से कई students साथ बाहर आ सकते हैं)। एक ID selector एक ख़ास university roll number बुलाने जैसा है: 'Roll Number 45!' केवल एक अनोखा student जवाब देता है। Combinators कहने जैसे हैं: 'Roll Number 45 का तत्काल roommate खोजो'।
Theory
CSS Selectors को औपचारिक रूप से समझना
university exam papers में, एक CSS Selector उस pattern के रूप में परिभाषित है जो आप जिन HTML elements को style करना चाहते हैं उन्हें target और चुनने के लिए इस्तेमाल होता है। बुनियादी selectors में Element (tag name द्वारा target करता है जैसे h1), ID (#idname इस्तेमाल करके एक अनोखे element को target करता है), और Class (.classname इस्तेमाल करके कई elements को target करता है) शामिल हैं। Advanced options में Attribute selectors (मौजूदा properties द्वारा elements target करना जैसे [type='text']) और Pseudo-elements (एक element के ख़ास structural हिस्सों को style करना जैसे decorative drop caps बनाने के लिए ::first-letter) शामिल हैं।
At a glance
Table 1: मुख्य CSS Selectors और Exam Syntax
| Selector Type | Syntax Example | यह क्या Target करता है |
|---|---|---|
| Element | p { color: blue; } | पूरे web page पर हर एक p tag |
| ID | #hero { background: gray; } | id='hero' वाला अकेला अनोखा element |
| Class | .btn { font-weight: bold; } | class='btn' रखता कोई भी element |
| Attribute | [target='_blank'] { color: red; } | एक बिल्कुल नए tab में खुलने के लिए configured links |
| Pseudo-element | p::first-line { color: gold; } | एक paragraph के अंदर केवल text की बिल्कुल पहली line |
Theory
Family Tree: Combinators
HTML structure में उनकी बिल्कुल location के आधार पर elements target करने के लिए, university exams अक्सर चार structural combinators test करते हैं। Contextual (descendant selector, एक space के साथ लिखा जैसे div p) एक div के अंदर किसी भी paragraph को target करता है, चाहे कितनी भी गहराई में nested हो। Direct descendent (div > p) केवल उस paragraph को target करता है जो उस div का तत्काल child है। Adjacent sibling (h2 + p) उस paragraph को target करता है जो बिल्कुल एक h2 के बाद रखा है। General sibling (h2 ~ p) उन सारे paragraphs को target करता है जो उसी parent के तहत एक h2 के बाद आते हैं।
Practical
Portfolio Selection Rules
/* Element Selector: Global change */
h2 {
color: #2c3e50;
}
/* ID Selector: Unique section styling */
#about-me {
background-color: #f8f9fa;
}
/* Class Selector: Reusable component style */
.project-card {
border: 1px solid #dddddd;
}
/* Direct Descendent Selector: Immediate list items only */
ul > li {
list-style: none;
}
/* Adjacent Sibling Selector: Paragraph directly following a heading */
h2 + p {
font-weight: bold;
}Quiz
एक university lab exam में, आप एक footer element के अंदर links का text color बदलना चाहते हैं, पर बाक़ी जगह links को पूरी तरह अकेला छोड़ना चाहते हैं। कौन सा selector सही है?
- footer a
- footer + a
- footer ~ a
- footer:a
Show the answer
footer a
contextual descendant selector (footer और a के बीच एक space) footer element के अंदर स्थित सारे anchor tags से मेल खाता है, nesting depth की परवाह किए बिना। '+' इस्तेमाल करना footer के ठीक बाद एक link खोजता है, जबकि '~' footer के बाद किसी भी sibling link को खोजता है।
Think first
जटिल Combinators को Decode करना
selector rule 'article > p + span' का विश्लेषण कीजिए। जवाब reveal करने से पहले मन में बिल्कुल ट्रेस कीजिए कि कौन सा element style पाएगा।
Show the answer
यह selector एक 'span' element को target करता है। शर्तें सख़्त हैं: span को एक 'p' tag का तत्काल adjacent sibling होना चाहिए (इसके ठीक बाद रखा), और वह 'p' tag एक 'article' element का direct child (तत्काल descendant) होना चाहिए। अगर paragraph article के अंदर एक अलग section element में nested है, यह rule लागू होने में विफल होगा।
Quiz
अपनी stylesheet में 'div p' और 'div > p' लिखने के बीच अहम structural अंतर क्या है?
- div p केवल पहले paragraph को target करता है, जबकि div > p सारे paragraphs को target करता है।
- div p div के अंदर कहीं भी किसी paragraph को target करता है, जबकि div > p केवल तत्काल children को target करता है।
- div p invalid CSS syntax है, जबकि div > p standard layout syntax है।
- div p parents पर styles लागू करता है, जबकि div > p horizontal siblings पर styles लागू करता है।
Show the answer
div p div के अंदर कहीं भी किसी paragraph को target करता है, जबकि div > p केवल तत्काल children को target करता है।
'div p' एक descendant selector है जो उस div के अंदर हर एक paragraph खोजता है, भले वह sections या blocks जैसे अन्य elements के अंदर लपेटा हो। 'div > p' एक child selector है, केवल उन paragraphs से मेल खाता है जिनका तत्काल parent वह ख़ास div है।
Watch out
Duplicate ID की सज़ा
university lab practicals में सबसे बड़ा mark गँवाने वाला एक ही page पर एक ID selector दोबारा इस्तेमाल करना है। जबकि एक ढीला browser अभी भी एक जैसी ID वाले कई elements पर style लागू कर सकता है, आपका HTML code validation में पूरी तरह विफल होगा, और document.getElementById() जैसा बाद का JavaScript code टूट जाएगा। यह नियम याद रखिए: IDs आपके university roll number की तरह सख़्ती से unique हैं, जबकि Classes आपके course department name की तरह पूरी तरह पुनः प्रयोज्य हैं।
Theory
Placements के लिए यह क्यों अहम है
बाद के semesters में corporate placement drives के लिए अपनी portfolio website बनाते समय, ख़ास selectors लिखना style bleeding रोकता है। पचास अलग individual classes बनाने के बजाय, professional developers साफ़, maintainable stylesheets लिखने के लिए combinators और pseudo-elements (जैसे nav a:hover) इस्तेमाल करते हैं जो professional दिखती हैं और अविश्वसनीय रूप से तेज़ load होती हैं।
Summary
Key takeaways
- Element selectors एक HTML tag के हर instance पर global styles लागू करते हैं।
- Classes एक dot prefix इस्तेमाल करते हैं और कई items भर पूरी तरह पुनः प्रयोज्य हैं।
- IDs एक hash prefix इस्तेमाल करते हैं और एक अकेले page पर पूरी तरह unique रहने चाहिए।
- Combinators descendants, direct children, और adjacent siblings जैसे relationships manage करते हैं।
- Pseudo-elements content के ख़ास हिस्सों को style करते हैं जैसे text की पहली line।
- Memory hook: एक समूह के लिए Dot, एक अकेले pass के लिए hash!