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`s ਨੂੰ ਵੀ ਮੇਲ ਖਾਂਦਾ ਹੈ, ਜਦਕਿ `.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/ਡੂੰਘੀ ਨੈਸਟਿੰਗ ਨੂੰ ਕਲਾਸਾਂ ਨੂੰ ਤਰਜੀਹ ਦਿਓ।