CSS: nth-child() సెలెక్టర్‌ను అర్థం చేసుకోవడం

మీలాంటి పాఠకులు MUOకి మద్దతు ఇవ్వడానికి సహాయం చేస్తారు. మీరు మా సైట్‌లోని లింక్‌లను ఉపయోగించి కొనుగోలు చేసినప్పుడు, మేము అనుబంధ కమీషన్‌ను సంపాదించవచ్చు. ఇంకా చదవండి.

అన్ని CSS సెలెక్టర్‌ల మాదిరిగానే, మీరు వెబ్‌పేజీలోని మూలకాలను గుర్తించడానికి మరియు వాటికి శైలులను వర్తింపజేయడానికి :nth-child()ని ఉపయోగించవచ్చు. కానీ ఈ సెలెక్టర్ వారి సాపేక్ష స్థానం ఆధారంగా తోబుట్టువుల సమితిని తగ్గించడానికి మిమ్మల్ని అనుమతిస్తుంది.

రోజు MUO వీడియో కంటెంట్‌తో కొనసాగడానికి స్క్రోల్ చేయండి

సెలెక్టర్ సాధారణ కేసుల కోసం కొన్ని ప్రాథమిక కీలకపదాలకు మద్దతు ఇస్తుంది, కానీ ఇది శక్తివంతమైన నమూనా-సరిపోలిక వాక్యనిర్మాణాన్ని కూడా అందిస్తుంది. దీన్ని ఉపయోగించి, మీరు మీ అవసరాల ఆధారంగా సాధారణ, పునరావృత నమూనాలు లేదా మరింత సంక్లిష్టమైన నిర్వచనాల ఆధారంగా అంశాలను ఎంచుకోవచ్చు.

---

---

ఎందుకు డిస్క్ వినియోగం 100 వద్ద ఉంది

ది :వ-చైల్డ్() సెలెక్టర్ సింటాక్స్

గా CSS సూడో-క్లాస్ సెలెక్టర్ , :nth-child() సింటాక్స్ ఇతర ఎంపికదారుల నుండి భిన్నంగా ఉంటుంది. ఇది తోబుట్టువుల సెట్‌లోని ఎలిమెంట్‌లను సరిపోల్చడానికి ఒక నమూనాగా వాదనను తీసుకుంటుంది:

 :nth-child(args) { 
    /*...*/ 
}

కుండలీకరణాల్లోని వాదనలపై ప్రధాన దృష్టి ఉంది. ఈ ఆర్గ్యుమెంట్‌లు ఎంచుకోవాల్సిన మూలకాల ఉపసమితిని నిర్వచిస్తాయి.

సాధారణ కేసుల కోసం కీవర్డ్ విలువలను ఉపయోగించడం

ఈ సెలెక్టర్ రెండు కీవర్డ్ విలువలను కలిగి ఉంటుంది: బేసి మరియు కూడా . అవి ప్రత్యేకంగా ఉపయోగపడతాయి పట్టికలో ప్రత్యామ్నాయ వరుసలను స్టైలింగ్ చేయడం .

మీరు ఈ కీవర్డ్ విలువలను ఎప్పుడు ఉపయోగించవచ్చో చెప్పడానికి ఒక సాధారణ ఆర్డర్ జాబితా మరొక మంచి ఉదాహరణ:

 <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

ఉపయోగించి :వ-బిడ్డ(బేసి) సెలెక్టర్, మీరు ప్రతి ప్రత్యామ్నాయ వస్తువు యొక్క రంగును మార్చవచ్చు:

---

---

 :nth-child(odd) { 
    color: red; 
}

అంశాలు సూచిక 1 వద్ద ప్రారంభమవుతాయి, కాబట్టి మొదటి అంశం ఎరుపు రంగులో కనిపిస్తుంది, ఆపై మూడవది మరియు మొదలైనవి:

మరింత సౌలభ్యం కోసం ఫంక్షనల్ సంజ్ఞామానం

మీరు వ్యక్తిగత మూలకాన్ని ఎంచుకోవడానికి ఒకే పూర్ణాంకాన్ని ఉపయోగించవచ్చు, ఇలా:

---

---

 li:nth-child(4) { 
    color: red; 
}

ఈ సందర్భంలో, సెలెక్టర్ జాబితాలోని నాల్గవ అంశంతో మాత్రమే సరిపోలుతుంది:

మీరు విసుగు చెందినప్పుడు ఇంటర్నెట్‌లో ఏమి చేయాలి

ఈ సింటాక్స్ అనేది మరింత సాధారణ ఫంక్షనల్ సింటాక్స్ యొక్క ప్రత్యేక సందర్భం, ఇది ఇచ్చిన నమూనాకు సరిపోలే అంశాలను ఎంచుకుంటుంది. ఈ వాక్యనిర్మాణం:

 :nth-child(An+B) { 
    /*...*/ 
}

ఈ సంజ్ఞామానంలో, ఎ దశ పరిమాణం. దీని అర్థం సెలెక్టర్ తదుపరి అంశాన్ని ఎంచుకోవడానికి ఎన్నిసార్లు తరలించాలో. ఇది ప్రతి ఇతర వస్తువు, ప్రతి మూడవ అంశం మొదలైనవాటిని ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది. బి ఎంపిక ప్రారంభమయ్యే ప్రారంభ స్థానం.

ఉదాహరణకు, వాదన 3n+1 తీసుకోండి:

 li:nth-child(3n+1) { 
    color: red; 
}

ఇది మొదటి అంశం వద్ద ఎంపికను ప్రారంభిస్తుంది మరియు ఆ తర్వాత ప్రతి మూడవ అంశంతో కొనసాగుతుంది:

దీన్ని 3n+2 వ్యక్తీకరణతో పోల్చండి:

 li:nth-child(3n+2) { 
    color:red; 
}

ఇది ఇప్పటికీ ప్రతి మూడవ అంశాన్ని ఎంచుకుంటుంది, కానీ ఇప్పుడు ఇది జాబితాలోని రెండవ అంశం నుండి ప్రారంభమవుతుంది:

మరొక ఆసక్తికరమైన ఉదాహరణ: nth-child(n+3):

 li:nth-child(n+3) { 
    color: red; 
}

ఇది మూడవ (+3) నుండి ప్రారంభమయ్యే ప్రతి అంశాన్ని (n) ఎంచుకుంటుంది. ఇది ఇలా కనిపిస్తుంది:

నిర్దిష్ట ఫలితాలను సాధించడానికి మీరు వ్యవకలనాన్ని కూడా ఉపయోగించవచ్చు:

 li:nth-child(3n-1) { 
    color: red; 
}

ఈ ఉదాహరణ ఇప్పటికీ ప్రతి మూడవ అంశాన్ని ఎంచుకుంటుంది, అయితే ఇది 'మైనస్ ఫస్ట్' నుండి ప్రారంభమవుతుంది. ఫలితంగా, ఇది జాబితాలోని రెండవ అంశాన్ని, ఆపై ఐదవ అంశాన్ని ఎంచుకుంటుంది మరియు మరిన్నింటిని ఎంచుకుంటుంది:

సింటాక్స్

మీరు కీవర్డ్‌ని కూడా ఉపయోగించవచ్చు యొక్క తరువాత a సెలెక్టర్ :nth-child() సెలెక్టర్‌లో వాదనగా. ఈ వాక్యనిర్మాణం సాధారణ నమూనా ఎంపిక చేసుకునే సాధ్యం అంశాలను తగ్గించడానికి మిమ్మల్ని అనుమతిస్తుంది.

ఉదాహరణకు, మీ మార్కప్ ఒరిజినల్ కంటే చాలా క్లిష్టంగా ఉందని ఊహించుకోండి:

మీరు సిరికి 112 అని చెబితే ఏమవుతుంది

 <ol> 
    <li class="old">Item 1</li> 
    <li class="new">Item 2</li> 
    <li class="new">Item 3</li> 
    <li class="old">Item 4</li> 
    <li class="new">Item 5</li> 
    <li class="new">Item 6</li> 
    <li class="new">Item 7</li> 
</ol>

ఇప్పుడు, నిర్దిష్ట తరగతి ఉన్న వాటి సెట్ నుండి సరి ఐటెమ్‌లను ఎంచుకోవడానికి: nth-child ఉపయోగించండి:

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.new) { 
    color: red; 
}

సరి-సంఖ్యల బోల్డ్ ఐటెమ్‌లు మాత్రమే ఎరుపు రంగులో ఎలా ఉన్నాయో గమనించండి:

ఇది ఎలా భిన్నంగా ఉంటుందో కూడా పరిగణించండి li.new:nth-child(కూడా) ఇది .కొత్త మూలకాలను లక్ష్యంగా చేసుకుంటుంది, కానీ అవి సమానంగా ఉంటే మాత్రమే. ఇది పై ఉదాహరణలో 2 మరియు 6 అంశాలు.

:nth-child() సెలెక్టర్‌తో పని చేస్తోంది

మీరు :nth-child() ఎంపిక సాధనాన్ని ఉపయోగించి ప్రత్యేక డిజైన్‌లను సాధించవచ్చు. మీరు రంగుల వెబ్‌సైట్‌లను సృష్టించవచ్చు మరియు డేటా టేబుల్‌లలో అడ్డు వరుసలు మరియు నిలువు వరుసలను హైలైట్ చేయవచ్చు. దీన్ని ఇతర CSS సెలెక్టర్‌లతో కలపడం వలన సంక్లిష్టమైన లేఅవుట్‌లు మరియు డిజైన్‌లను రూపొందించడంలో మీకు సహాయపడుతుంది.