CSS సెలక్టర్ల యొక్క ప్రధాన రకాలు ఏమిటి?

Question

Accepted Answer

సెలక్టర్లు ఎక్కడ నియమం వర్తించే అంశాలను లక్ష్యం చేస్తాయి. అవి సాధారణ (ట్యాగ్ ద్వారా) నుండి శక్తిశాలీ సంయోజకాల వరకు ఉన్నాయి. ```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 */ ``` ## సంయోజకాలు — అంశాల మధ్య సంబంధాలు ```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 */ ``` స్పేస్ (సంతతి) మరియు `>` (ప్రత్యక్ష పిల్ల) మధ్య వ్యత్యాసం ముఖ్యమైనది: `.menu li` లోతుగా సమ్మిలిత `li` లతో కూడా సరిపోతుంది, అయితే `.menu > li` కేవలం అగ్ర స్థరాన్ని సరిపోతుంది. ## కూట-తరగతులు మరియు కూట-అంశాలు ```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 */ ``` ## సమూహీకరణ మరియు ఆధునిక సెలక్టర్లు ```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 */ ``` ## ఇది ఎందుకు ముఖ్యమైనది సెలక్టర్లు మీరు శైలులను మార్కআప్‌కు ఎలా కనెక్ట్ చేస్తారో. తరగతులను (కార్మికుడు), సంయోజకాలను (సంబంధాల కోసం), మరియు నిర్మాణాత్మక/స్థితి కూట-తరగతులను నైపుణ్యం పొందడం మీరు ప్రతిచోటా అదనపు తరగతులను జోడించకుండా ఖచ్చితంగా లక్ష్యం చేయడానికి అనుమతిస్తుంది — మరియు ఆధునిక `:is()`/`:has()` సంక్లిష్ట లక్ష్యాలను సంక్షిప్తంగా చేస్తాయి. ప్రత్యేకత నిర్వహణీయం ఉంచడానికి ids/భారీ సంచితకు ఎక్కువ తరగతులకు ఆదరణ చేయండి.