Advanced Selectors
Combinators
Descendant, Child, Sibling Selectors
💡 Combinators family relationships describe karte hain — descendant (koi bhi generation neeche, jaise "descendants"), child (seedha next generation, jaise "bachche"), sibling (same parent ke, jaise "bhai-behen").
Space (div p) — DESCENDANT combinator, kisi bhi depth par andar. > (div > p) — CHILD combinator, sirf DIRECT children. + (h2 + p) — ADJACENT sibling, immediately baad wala same-level element. ~ (h2 ~ p) — GENERAL sibling, baad wale saare same-level elements.
/* Descendant — kisi bhi depth: */
.card p { color: gray; } /* .card ke andar KAHI bhi p, chahe kitna bhi nested ho */
/* Child — sirf direct: */
.card > p { color: gray; } /* SIRF direct child p, nested nahi */
/* Adjacent sibling — immediately baad: */
h2 + p { margin-top: 0; } /* h2 ke turant baad wala p */
/* General sibling — sab baad wale: */
h2 ~ p { color: blue; } /* h2 ke baad wale SAARE same-level p */🔗
Combinators family relationships describe karte hain — descendant (koi bhi generation neeche, jaise "descendants"), child (seedha next generation, jaise "bachche"), sibling (same parent ke, jaise "bhai-behen").
1 / 2
⚡ Quick Recap
- Space = descendant (kisi bhi depth), > = direct child
- + = immediately-next sibling, ~ = all-following siblings
- > aur + zyada precise/predictable, space zyada broad
Is page mein (2 subtopics)
Combinators ko chain karke bahut specific selectors bana sakte ho — jaise "ek card ke andar, direct child list mein, har list item ke baad wale saare siblings"।
.card > ul > li ~ li {
border-top: 1px solid #eee;
/* .card ka direct child ul, uska koi li,
jiske PEHLE koi aur li already ho (yani, first item ke alawa sab) */
}Tip: Bahut lambi chained selectors (4+ combinators) usually sign hain ki HTML structure ya CSS approach ko simplify karna chahiye — agar selector padhna khud mushkil lag raha hai, ek class add karna often better hai.
Modern browsers selectors ko RIGHT-TO-LEFT parse karte hain — .container div (broad rightmost part "div", phir check karta hai .container ancestor hai ya nahi) potentially zyada elements check karta hai .specific-class se direct.
/* Potentially slower — bahut generic rightmost selector: */
.container div { color: red; }
/* Potentially faster — specific rightmost selector: */
.container .specific-item { color: red; }Tip: Modern browsers itne optimized hain ki selector performance rarely REAL bottleneck hota hai practical websites mein — code readability/maintainability ko usually performance micro-optimization se zyada priority do, jab tak genuinely measurable issue na ho.