CSS :nth-child() ప్రత్యార్థకం

నిర్వచనం మరియు ఉపయోగం

CSS :nth-child(n) 伪类用于匹配作为其父元素第 n 个子元素的任何元素。

此伪类根据元素在其父元素的子列表中的索引来匹配元素。

n 可以是一个数字/索引、一个关键字（అయ్యి 或 సమస్తం）或一个公式（如 an + b)

హిందూస్తానీ ప్రతిపాదన:చూడండి :nth-of-type() ప్రాక్సీ స్ట్రింగ్స్ ద్వారా ఎంచుకుంటాడు మరియు తన పేరుతో పేర్కొన్న పేరు కలిగిన ప్రాక్సీ స్ట్రింగ్స్ ప్రకారం ఎంచుకుంటాడు:అదే రకమైన (టాగ్ పేరు)యొక్క n అన్ని పిల్లలలో ఉన్న మూలకాన్ని ఎంచుకుంటాడు.

ప్రతిపాదన

ఉదాహరణ 1

ఎలా ఉపయోగించాలి :nth-child() ప్రాక్సీ స్ట్రింగ్స్:

/* సోదరుల సమూహంలో ప్రతి నాలుగవ మూలకాన్ని ఎంచుకుంటాము */
:nth-child(4) {
  background-color: yellow;
}
/* div సోదరులలో రెండవ మూలకాన్ని ఎంచుకుంటాము */
div:nth-child(2) {
  background-color: red;
}
/* జాబితాలో రెండవ li మూలకాన్ని ఎంచుకుంటాము */
li:nth-child(2) {
  background-color: lightgreen;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

అయ్యి మరియు సమస్తం ఇంటిజర్ పదక్షం, ఇది అయ్యి లేదా సమస్తం సంఖ్యలో ఉన్న పిల్లలను ఎంచుకుంటాడు (మొదటి పిల్లను సంఖ్యలో 1 ఉంటుంది).

ఇక్కడ, మేము అయ్యి సంఖ్యలో మరియు సమస్తం సంఖ్యలో ఉన్న <p> మూలకాలకు వేర్వేరు బ్యాక్గ్రౌండ్ కలర్ ని నిర్దేశిస్తాము:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

ఫార్ములా (an + b) వివరణం:a ఇంటిజర్ స్టాప్, n అనేది 0 నుండి ప్రారంభమవుతున్న అన్ని సంఖ్యాత్మక పదార్థాలు ఉన్నాయి:b ఇంటిజర్ ఆఫ్సెట్

ఇక్కడ, మేము సంఖ్యలో 3 గుణమైన అన్ని <p> మూలకాలకు బ్యాక్గ్రౌండ్ కలర్ ని నిర్దేశిస్తాము (మూడవ, ఆరవ, తొమ్మిదవ వంటి మూలకాలను ఎంచుకుంటాము):

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

ఇక్కడ, మేము సంఖ్యలో 3 గుణమైన అన్ని <p> మూలకాలకు బ్యాక్గ్రౌండ్ కలర్ ని నిర్దేశిస్తాము. అప్పుడు మేము 1 ను తీసివేస్తాము (మొదటి, నాలుగవ, ఏడవ వంటి మూలకాలను ఎంచుకుంటాము):

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

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

:nth-child(index అయ్యి | సమస్తం | an+b) {
  సిఎస్ఎస్ డిక్లరేషన్స్;
}

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ప్రాక్సీ కోసం పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ని నిర్దేశిస్తాయి。