Cûdahiya di navbera ": nth-child", ": first-child" û ": first-of-type" di CSS de

Balkêşî

Ravekirina berfireh

Pêşîn, ka em li koda nimûneya HTML-ya jêrîn binêrin, bi navgîniya vê kodê em ê karanîna sê hilbijêran yek bi yek fam bikin.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": N-zarok" bi berfirehî vegot

Wateya css1 di kodê jorîn de hêmana zarokê duyemîn e û celeb "div" e, ji ber vê yekê tenê div1 tê hilbijartin. div1 di konteynirên dêûbavan de hêmana zarokê duyemîn e û celeb "div" e. p3 hêmana zarokê duyemîn a konteynera dêûbav e, lê ew ne ji celebê "div" e ji ber vê yekê nayê hilbijartin. Heke em şêwazê biguhezînin da ku div-ê li ber hilbijêrê derxînin, wê hingê p3 jî dê were hilbijartin.

": Zarokê yekem" bi berfirehî vegot

Wateya css2 di koda jorîn de yekem hêmana zarokan e û celeb p e, ji ber vê yekê tenê p1 tê hilbijartin. p1 di konteynirên dêûbavan de yekem hêmana zarok e û celeb "p" ye. Wateyek wê ya dişibihe ya jorîn heye: "nth-child". Heke hûn ": nth-child" bikar bînin da ku parametreyê derbasî 1 bikin, bandor tam yek e.

": Yekem-ji-celeb" bi berfirehî vegotin

Wateya css3 di kodê jorîn de ev e ku tîpa yekem hêmanek zarokê "p" ye. Cûdahiya li vir ji du hilbijêrên jorîn ew e ku yekemcar tîpa pêwendîdar tê dîtin, û dûv re hêmana yekem a ku bi tîpê re lihevhatî tê dîtin . Ji ber vê yekê yên bijartî p1 û p3 ne. P1 û p3 hem di konteynirên dêûbavan de yekem hêmanên "p" ne.