X'inhuma t-tipi ewlenin tal-CSS selectors?

Question

Accepted Answer

Is-selectors jissuqu liema elementi li tapplika regola. Jvarjaw minn semplic (b'tag) sa kombinaturi qawwija. ```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 */ ``` ## Kombinaturi — relazzjonijiet bejn elementi ```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 */ ``` Id-differenza bejn ispazju (dixxendenti) u `>` (iben dirett) hija importanti: `.menu li` jaqbel ukoll ma' `li`s li jkunu nested fil-fond, filwaqt li `.menu > li` jaqbel biss il-livell ta' fuq. ## Pseudo-klassijiet u pseudo-elementi ```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 */ ``` ## Gruppazzjoni u selectors moderni ```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 */ ``` ## Għaliex din l-importanza Is-selectors huma kif tu qabbad l-istili mal-markup. Il-master tal-klassijiet (l-għodda prinċipali), kombinaturi (għar-relazzjonijiet), u pseudo-klassijiet strutturali/stat ippermettuli sabiex tsakkil b'mod preċiż mingħajr ma tżid klassijiet ekstra kullimkien — u `:is()`/`:has()` moderni jagħmlu t-targeting kumplessa konċiza. Ippreferi klassijiet fuq id/nested profond biex iżżomm l-ispeċifiċità maġrufa.