ఎలా CSS తో జీబ్రా గీతలు పట్టికలు సృష్టించండి

ఉపయోగించి: nth- యొక్క-రకం (n) పట్టికలు

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

మీరు ప్రతి ఇతర వరుసను CSS తరగతితో అమర్చడం ద్వారా ఆ తరగతికి శైలిని నిర్వచించడం ద్వారా మీరు సాధించవచ్చు. ఇది పనిచేస్తుంది కానీ దాని గురించి వెళ్ళడానికి ఉత్తమ లేదా అత్యంత సమర్థవంతమైన మార్గం కాదు.

ఈ పద్దతిని ఉపయోగించినప్పుడు, మీరు ప్రతి పట్టికను సవరించడానికి అవసరమైన ప్రతిసారీ మీరు పట్టికలో ప్రతి అడ్డు వరుసను సవరించాలి, ప్రతి వరుసలో మార్పులకు అనుగుణంగా ఉంటుంది. ఉదాహరణకు, మీరు మీ పట్టికలో ఒక క్రొత్త వరుసను చొప్పించినట్లయితే, క్రింద ఉన్న ప్రతి ఇతర వరుసలో తరగతి మార్చాల్సిన అవసరం ఉంది.

జీబ్రా స్ట్రిప్స్తో స్టైల్ పట్టికలు సులభంగా CSS చేస్తుంది. Nth-of-type (n) CSS సెలెక్టర్ : మీరు ఏ అదనపు HTML గుణాలు లేదా CSS తరగతులు జోడించడానికి అవసరం లేదు, మీరు కేవలం ఉపయోగించడానికి.

Nth-of-type (n) సెలెక్టర్ CSS లో ఒక నిర్మాణ నకిలీ తరగతి ఉంది, ఇది మీరు మాతృ మరియు సహోదర అంశాలకు వారి సంబంధాల ఆధారంగా శైలి అంశాలకు అనుమతిస్తుంది. మీరు వారి సోర్స్ ఆర్డర్ ఆధారంగా ఒకటి లేదా మరిన్ని అంశాలను ఎంచుకోవడానికి దాన్ని ఉపయోగించవచ్చు. మరో మాటలో చెప్పాలంటే, దాని తల్లిదండ్రుల నిర్దిష్ట రకం యొక్క nth చైల్డ్ ప్రతి మూలకంతో ఇది సరిపోలవచ్చు.

లేఖ n ఒక కీవర్డ్ (బేసి లేదా కూడా), ఒక సంఖ్య, లేదా సూత్రం కావచ్చు.

ఉదాహరణకు, ఒక పసుపు నేపథ్య రంగుతో ప్రతి ఇతర పేరా ట్యాగ్ శైలికి, మీ CSS పత్రాన్ని కలిగి ఉంటుంది:

p: nth-of-type (బేసి) {
నేపథ్యం: పసుపు;
}

మీ HTML పట్టికతో ప్రారంభించండి

మొదట, మీ టేబుల్ ను మీరు సాధారణంగా HTML లో వ్రాసేటప్పుడు సృష్టించండి. వరుసలు లేదా నిలువులకు ఏ ప్రత్యేక తరగతులను జోడించవద్దు.

మీ స్టైల్ లో, కింది CSS ను జోడించండి:

tr: nth-of-type (బేసి) {
నేపథ్య రంగు: #ccc;
}

ఇది మొదటి వరుసలో ప్రారంభమయ్యే బూడిదరంగు నేపథ్య రంగుతో ప్రతి ఇతర వరుస శైలిని చేస్తుంది.

అదే విధంగా శైలి ఆల్టర్నేటింగ్ లు

మీరు మీ టేబుల్స్లో స్తంభాలకు స్టైలింగ్ యొక్క అదే విధమైన చేయవచ్చు. అలా చేయుటకు, మీ CSS తరగతి t లో t మార్చడానికి. ఉదాహరణకి:

td: nth-of-type (బేసి) {
నేపథ్య రంగు: #ccc;
}

సూత్రాలు ఉపయోగించి ఒక nth-of-type (n) సెలెక్టర్

సెలెక్టర్లో ఉపయోగించిన ఫార్ములా కోసం వాక్యనిర్మాణం + బి.

• చక్రం లేదా ఇండెక్స్ పరిమాణాన్ని సూచించే సంఖ్య.

• n నిజానికి అక్షరం "n" మరియు కౌంటర్ను సూచిస్తుంది, ఇది 0 వద్ద నక్షత్రాలు.

• + "-" ఆపరేటర్లు,

• b ఒక పూర్ణాంకం మరియు ఆఫ్సెట్ విలువను సూచిస్తుంది-ఉదాహరణకు, ఎన్ని వరుసలు డౌన్ సెలెక్టర్ నేపథ్య రంగును వర్తింపచేయడం ప్రారంభించబడాలి. ఆపరేటర్ సూత్రంలో చేర్చబడి ఉంటే ఇది అవసరం.

ఉదాహరణకు, మీరు ప్రతి 3 వ వరుస కోసం నేపథ్య రంగును సెట్ చేయాలనుకుంటే, మీ ఫార్ములా 3n + 0 అవుతుంది. మీ CSS ఇలా కనిపిస్తుంది:

tr: nth-of-type (3n + 0) {
నేపథ్యం: slategray;
}

Nth-type-type సెలెక్టర్ ఉపయోగించి ఉపయోగపడిందా సాధనాలు

మీరు నకిలీ తరగతి nth- రకం-రకం సెలెక్టర్ను ఉపయోగించి సూత్రాన్ని కారకంచే చిన్నపితంగా భావిస్తే, ప్రయత్నించండి: nth Tester సైట్ మీకు కావలసిన రూపాన్ని సాధించడానికి వాక్యనిక్స్ను నిర్వచించడంలో సహాయపడే ఉపయోగకరమైన సాధనంగా. Nth-of-type ను ఎంచుకోవడానికి డ్రాప్-డౌన్ మెనుని ఉపయోగించండి (మీరు కూడా ఇక్కడ నకి-బాల వంటి ఇతర నకిలీ-తరగతులతో కూడా ప్రయోగాలు చేయవచ్చు).