Cilat janë llojet kryesore të zgjedhësve CSS?

Question

IT Interview Practice · Accepted Answer

Zgjedhësit synojnë cilat elemente një rregull zbatohet. Ato variojnë nga të thjeshtë (sipas etiketës) deri tek kombinuesit të fuqishëm. ```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 */ ``` ## Kombinuesit — marrëdhëniet midis elementeve ```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 */ ``` Dallimi midis hapësirës (pasardhës) dhe `>` (fëmija i drejtpërdrejtë) është i rëndësishëm: `.menu li` përputhet gjithashtu me `li` thellësisht të futuara, ndërsa `.menu > li` përputhet vetëm me nivelin më të lartë. ## Pseudo-klasat dhe pseudo-elementet ```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 */ ``` ## Grupimi dhe zgjedhësit modernë ```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 */ ``` ## Pse ka rëndësi Zgjedhësit janë mënyra se si lidhni stilet me shënimin. Zotërimi i klasave (punëtori), kombinuesve (për marrëdhëniet) dhe pseudo-klasave strukturore/gjendjeje ju lejon të synoni me saktësi pa shtuar klasa shtesë kudo — dhe modernat `:is()`/`:has()` e bëjnë synimin kompleks të përmbledhur. Më mirë të preferoni klasat mbi id-je/futurim të rëndë për të mbajtur specifitetin të menaxhueshëm.

Kombinuesit — marrëdhëniet midis elementeve

Pseudo-klasat dhe pseudo-elementet

Grupimi dhe zgjedhësit modernë

Pse ka rëndësi

Pyetje të ngjashme