Wachanganuzi hutekeleza ni elementi ipi ambayo kanuni inatumika. Zinatoka rahisi (kwa tagi) hadi kwa wachanganuzi wenye nguvu.
css
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
Wachanganuzi hutekeleza ni elementi ipi ambayo kanuni inatumika. Zinatoka rahisi (kwa tagi) hadi kwa wachanganuzi wenye nguvu.
/* 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 */
Tofauti kati ya nafasi (descendant) na > (mtoto wa moja kwa moja) ni muhimu: .menu li inafanana pia na li zilizobadilishwa kwa kina, wakati .menu > li inafanana na kiwango cha juu tu.
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 */
Wachanganuzi ni jinsi unavyounganisha mitindo na markup.
Kupata ustadi wa madarasa (mfanyakazi mkuu), wachanganuzi (kwa mahusiano), na pseudo-classes ya miundo/hali hukuruhusu kutekeleza kwa usahihi bila kuongeza madarasa ya ziada mahali penye — na :is()/:has() za kisasa hufanya utekelezaji wenye changamoto kuwa mfupi.
Penda madarasa badala ya ids/uingizaji uzani wa juu kuweka specificity inayoweza kusimamia.