Wat zijn de belangrijkste types CSS-selectors?

Question

Accepted Answer

Selectors bepalen welke elementen door een regel worden aangesproken. Ze variëren van eenvoudig (op tag) tot krachtige 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 */ ``` ## Waarom het belangrijk is ```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 */ ``` Het verschil tussen spatie (afstammeling) en `>` (direct kind) is belangrijk: `.menu li` komt ook diep geneste `li`'s tegen, terwijl `.menu > li` alleen het toplevel aansprekt. ## Pseudo-classes en pseudo-elementen ```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 */ ``` ## Groepering en moderne 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 */ ``` ## Waarom het belangrijk is Selectors zijn hoe je stijlen aan markup koppelt. De beheersing van classes (het werkpaard), combinators (voor relaties) en structurele/state pseudo-classes stelt je in staat om nauwkeurig te richten zonder overal extra classes toe te voegen — en moderne `:is()`/`:has()` maken complexe targeting beknopt. Geef voorkeur aan classes boven ids/diep nesten om specificiteit beheersbaar te houden.