Bedane ": nth-child", ": first-child" lan ": first-of-type" ing CSS

Referensi

Katrangan rinci

Pisanan, ayo goleki kode conto HTML ing ngisor iki, liwat kode iki, kita bakal ngerti panggunaan telung pamilih siji-siji.

            <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>
        

": Nth-child" nerangake kanthi rinci

Makna css1 ing kode ing ndhuwur yaiku elemen bocah nomer loro lan jinise yaiku "div", mula mung div1 sing dipilih. div1 minangka elemen anak nomer loro ing wadhah induk lan jinis yaiku "div". p3 minangka elemen anak nomer loro saka wadhah induk, nanging ora kalebu "div", mula ora dipilih. Yen kita ngowahi gaya kanggo nyopot div ing ngarep pamilih, mula p3 uga bakal dipilih.

": Anak pertama" nerangake kanthi rinci

Makna css2 ing kode ing ndhuwur yaiku elemen bocah pertama lan jinis p, mula mung p1 sing dipilih. p1 minangka elemen anak pertama ing wadhah induk lan jinis yaiku "p". Iki nduweni teges sing padha karo ": nth-child" ing ndhuwur. Yen sampeyan nggunakake ": nth-child" kanggo pass parameter dadi 1, efeke pancen padha.

": First-of-type" nerangake kanthi rinci

Makna css3 ing kode ing ndhuwur yaiku jinis pertama yaiku elemen bocah "p". Bedane ing kene saka rong pamilih ing ndhuwur yaiku jinis sing cocog pisanan ditemokake, banjur unsur pertama sing cocog karo jinis sing dipikolehi . Dadi sing dipilih yaiku p1 lan p3. Kaloro p1 lan p3 minangka elemen "p" pisanan ing wadhah induk.