Selektorit kohdentavat elementit, joihin sääntö koskee. Ne vaihtelevat yksinkertaisista (tagi-perusteinen) tehokkaita yhdistelmiä.
css
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
Selektorit kohdentavat elementit, joihin sääntö koskee. Ne vaihtelevat yksinkertaisista (tagi-perusteinen) tehokkaita yhdistelmiä.
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
.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 */
Ero välilyönnin (jälkeläinen) ja > (suora lapsi) välillä on tärkeä: .menu li vastaa myös syvään sisäkkäin olevia liitä, kun taas .menu > li vastaa vain ylimmälle tasolle.
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 */
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 */
Selektorit ovat tapa, jolla yhdistät tyylit merkintään.
Luokkien (työhevonen), yhdistelmien (suhteille) ja rakenteellisten/tilaisten pseudo-luokkien hallitseminen antaa sinulle mahdollisuuden kohdentaa tarkasti lisäämättä ylimääräisiä luokkia kaikkialle — ja modernit :is()/:has() tekevät monimutkaisesta kohdentamisesta ytimekkään.
Suosi luokkia tunnisteissa/raskaassa sisäkkäisyydessä pitääksesi spesifisyyden hallittavana.