A differenza trà ": nth-child", ": first-child" è ": first-of-type" in CSS

Riferimentu

Spiegazione dettagliata

Prima, guardemu u seguente codice di campione HTML, attraversu stu codice capisceremu l'usu di i trè selezziunatori unu per unu.

            <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" spiegatu in dettu

U significatu di css1 in u còdice sopra hè u secondu elementu zitellu è u tippu hè "div", allora solu div1 hè selezionatu. div1 hè u secondu elementu figliolu in u cuntinente parente è u tippu hè "div". p3 hè u secondu elementu zitellu di u cuntinente parente, ma ùn hè micca di tippu "div" dunque ùn hè micca sceltu. Se mudificemu u stile per caccià u div davanti à u selettore, allora p3 serà ancu sceltu.

": Primu figliolu" spiegatu in dettu

U significatu di css2 in u codice sopra hè u primu elementu zitellu è u tippu hè p, allora solu p1 hè selezionatu. p1 hè u primu elementu fiddolu in u cuntinente parente è u tippu hè "p". Hà un significatu simile à u sopra ": nèsimu-zitellu". Se aduprate ": nèsimu-zitellu" per passà u parametru à 1, l'effettu hè esattamente uguale.

": First-of-type" spiegatu in dettu

U significatu di css3 in u còdice sopra hè chì u primu tipu hè un elementu figliolu di "p". A differenza quì da i dui selettori sopra hè chì u tippu currispondente si trova prima, è dopu si ottiene u primu elementu chì currisponde à u tippu . Cusì i selezziunati sò p1 è p3. Tramindui p1 è p3 sò i primi elementi "p" in u cuntainer parent.