Basics
CSS Selectors
Element, Class, ID Selectors
💡 Selectors ek address system jaisa hai — batate hain browser ko exactly KAUNSA element style karna hai. Element selector ek poori street ko target karta hai (jaise "saare houses"), class ek specific type ko (jaise "saare red houses"), ID ek exact address (jaise "House No. 42").
Element selector (p { }) uss TYPE ke saare elements ko target karta hai. Class selector (.classname { }) us class wale saare elements ko — ek class multiple elements par reuse ho sakti hai. ID selector (#idname { }) sirf EK specific element ko — id page par unique honi chahiye.
/* Element selector — saare <p> tags: */
p { color: black; }
/* Class selector — class="highlight" wale sab: */
.highlight { background-color: yellow; }
/* ID selector — id="header" wala sirf ek: */
#header { font-size: 24px; }
/* HTML mein: */
/* <p class="highlight">Text</p>
<div id="header">Header</div> */🎯
Selectors ek address system jaisa hai — batate hain browser ko exactly KAUNSA element style karna hai. Element selector ek poori street ko target karta hai (jaise "saare houses"), class ek specific type ko (jaise "saare red houses"), ID ek exact address (jaise "House No. 42").
1 / 2
⚡ Quick Recap
- Element selector (p) = saare tags us type ke
- .class = reusable, multiple elements par
- #id = unique, ek hi element (page par sirf ek baar)
Is page mein (2 subtopics)
Multiple selectors ko comma se separate karke, same styles ek saath apply kar sakte ho — repetition avoid karta hai jab multiple elements ko same styling chahiye.
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}
/* Teeno headings same font/color paate hain, code duplicate nahi */Tip: Grouping tab useful hai jab genuinely SAME styles multiple selectors ko chahiye — agar sirf 1-2 properties common hain baaki alag, separate rules likhna zyada maintainable hai.
* (asterisk) HAR element ko select karta hai page par — CSS resets mein bahut common (jaise * { box-sizing: border-box; }), lekin general styling ke liye rarely use hota hai (bahut broad hai).
* {
box-sizing: border-box; /* har element ke liye globally */
}Common Mistake: * selector performance-heavy ho sakta hai bade complex pages par (har single element check hota hai) — CSS resets jaisi limited, zaroori jagah use karo, general styling ke liye nahi.