CSS లో ": 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" యొక్క పిల్లల మూలకం. పై రెండు సెలెక్టర్ల నుండి ఇక్కడ ఉన్న తేడా ఏమిటంటే సంబంధిత రకం మొదట కనుగొనబడింది, ఆపై రకానికి సరిపోయే మొదటి మూలకం పొందబడుతుంది . కాబట్టి ఎంచుకున్నవి పి 1 మరియు పి 3. P1 మరియు p3 రెండూ పేరెంట్ కంటైనర్‌లోని మొదటి "p" అంశాలు.