സി‌എസ്‌എസിലെ ": nth-child", ": first-child", ": first-of-type" എന്നിവ തമ്മിലുള്ള വ്യത്യാസം

റഫറൻസ്

വിശദമായ വിശദീകരണം

ആദ്യം, ഇനിപ്പറയുന്ന HTML സാമ്പിൾ കോഡ് നോക്കാം, ഈ കോഡിലൂടെ മൂന്ന് സെലക്ടർമാരുടെ ഉപയോഗം ഓരോന്നായി നമുക്ക് മനസ്സിലാകും.

            <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" വിശദമായി വിശദീകരിച്ചു

മുകളിലുള്ള കോഡിലെ css1 ന്റെ അർത്ഥം രണ്ടാമത്തെ ചൈൽഡ് എലമെൻറും തരം "div" ഉം ആണ്, അതിനാൽ div1 മാത്രമേ തിരഞ്ഞെടുക്കൂ. പാരന്റ് കണ്ടെയ്നറിലെ രണ്ടാമത്തെ ചൈൽഡ് ഘടകമാണ് div1, കൂടാതെ തരം "div" ആണ്. പാരന്റ് കണ്ടെയ്നറിന്റെ രണ്ടാമത്തെ ചൈൽഡ് ഘടകമാണ് p3, പക്ഷേ ഇത് "div" തരത്തിലുള്ളതല്ല അതിനാൽ ഇത് തിരഞ്ഞെടുത്തിട്ടില്ല. സെലക്ടറിന് മുന്നിലുള്ള ഒഴിവ് നീക്കംചെയ്യുന്നതിന് ഞങ്ങൾ ശൈലി പരിഷ്‌ക്കരിക്കുകയാണെങ്കിൽ, പി 3 യും തിരഞ്ഞെടുക്കും.

": ആദ്യ കുട്ടി" വിശദമായി വിശദീകരിച്ചു

മുകളിലുള്ള കോഡിലെ css2 ന്റെ അർത്ഥം ആദ്യത്തെ ചൈൽഡ് എലമെൻറും തരം p ഉം ആണ്, അതിനാൽ p1 മാത്രമേ തിരഞ്ഞെടുക്കൂ. പാരന്റ് കണ്ടെയ്നറിലെ ആദ്യത്തെ ചൈൽഡ് ഘടകമാണ് p1, കൂടാതെ തരം "p" ആണ്. ഇതിന് മുകളിലുള്ള ": nth-child" എന്നതിന് സമാനമായ അർത്ഥമുണ്ട്. പാരാമീറ്റർ 1 ലേക്ക് കൈമാറാൻ നിങ്ങൾ ": nth-child" ഉപയോഗിക്കുകയാണെങ്കിൽ, പ്രഭാവം സമാനമാണ്.

": ഫസ്റ്റ്-ഓഫ്-ടൈപ്പ്" വിശദമായി വിശദീകരിച്ചു

മുകളിലുള്ള കോഡിലെ css3 ന്റെ അർത്ഥം, ആദ്യത്തെ തരം "p" ന്റെ ഒരു ചൈൽഡ് എലമെൻറ് ആണ്. മുകളിലുള്ള രണ്ട് സെലക്ടർമാരിൽ നിന്നുള്ള വ്യത്യാസം, അനുബന്ധ തരം ആദ്യം കണ്ടെത്തി എന്നതാണ്, തുടർന്ന് തരവുമായി പൊരുത്തപ്പെടുന്ന ആദ്യ ഘടകം ലഭിക്കും . അതിനാൽ തിരഞ്ഞെടുത്തവ p1, p3 എന്നിവയാണ്. പാരന്റ് കണ്ടെയ്നറിലെ ആദ്യത്തെ "പി" ഘടകങ്ങളാണ് പി 1, പി 3 എന്നിവ.