CSS selectors کی بنیادی اقسام کیا ہیں؟

Question

Accepted Answer

Selectors اس بات کو متعین کرتے ہیں کہ کون سے عناصر پر ایک rule لاگو ہوتی ہے۔ یہ سادہ (tag کے ذریعے) سے لے کر طاقتور combinators تک ہوتے ہیں۔ ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## Combinators — عناصر کے درمیان تعلقات ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` space (descendant) اور `>` (direct child) کے درمیان فرق اہم ہے: `.menu li` گہرائی سے نسلی `li`s سے میل کھاتا ہے بھی، جبکہ `.menu > li` صرف top level سے میل کھاتا ہے۔ ## Pseudo-classes اور pseudo-elements ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## Grouping اور جدید selectors ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## یہ کیوں اہم ہے Selectors وہ طریقہ ہیں جس سے آپ styles کو markup سے منسلک کرتے ہیں۔ Classes (بنیادی کام کا گھوڑا)، combinators (تعلقات کے لیے)، اور structural/state pseudo-classes میں مہارت حاصل کرنا آپ کو صحیح طریقے سے target کرنے کی اجازت دیتا ہے بغیر ہر جگہ اضافی classes شامل کیے — اور جدید `:is()`/`:has()` پیچیدہ targeting کو مختصر بناتے ہیں۔ Specificity کو منظم رکھنے کے لیے classes کو ids/heavy nesting سے زیادہ ترجیح دیں۔