Melyek a CSS-szelektorok fő típusai?

Question

Accepted Answer

A szelektorok azokat az elemeket célozzák meg, amelyekre a szabály vonatkozik. Az egyszerűektől (címke szerinti) a hatékony kombinátorokig terjednek. ```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 */ ``` ## Kombinatorok — elemek közötti kapcsolatok ```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 */ ``` A szóköz (leszármazott) és a `>` (közvetlen gyermek) közötti különbség számít: a `.menu li` a mélyen egymásba ágyazott `li`-ket is megegyezik, míg a `.menu > li` csak a felső szintet egyezteti. ## Pszeudo-osztályok és pszeudo-elemek ```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 */ ``` ## Csoportosítás és modern szelektorok ```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 */ ``` ## Miért számít ez A szelektorok az a módja, ahogyan a stílusokat a jelöléshez kapcsolja. Az osztályok (a munkaló), a kombinatorok (kapcsolatokhoz) és a strukturális/állapot pszeudo-osztályok elsajátítása lehetővé teszi a pontos célzást anélkül, hogy mindenhol extra osztályokat kellene hozzáadnia — és a modern `:is()`/`:has()` tömören teszi az összetett célzást. Az specificitás kezelhetővé tartásához az ids/mélyen beágyazott szerkezetek helyett az osztályokat részesítse előnyben.