మరొక CSS క్లాస్ లోపల CSS క్లాస్‌ని ఎలా టార్గెట్ చేయాలి

”. తర్వాత, తదుపరి ఉపయోగం కోసం తరగతి లక్షణాన్ని కేటాయించండి.

దశ 2: నెస్టెడ్ “డివ్” కంటైనర్‌లను తయారు చేయండి

తరువాత, దశ 1 యొక్క అదే విధానాన్ని అనుసరించడం ద్వారా సమూహ div కంటైనర్‌లను తయారు చేయండి:

< div తరగతి = 'ప్రధాన-కంటెంట్' >

< div తరగతి = 'టేబుల్' >

< div తరగతి = 'వరుస' >

< div తరగతి = 'సి-ఎడమ' > పెళ్లి చేసుకో < / div >

< div తరగతి = 'సి-రైట్' > జాక్ < / div >

< div తరగతి = 'సి-ఎడమ' > టామ్ < / div >

< div తరగతి = 'సి-రైట్' > జూలై < / div >

< / div >

< / div >

< / div >

అవుట్‌పుట్

---

---

దశ 3: ప్రధాన “డివి” కంటైనర్‌పై స్టైలింగ్‌ని వర్తింపజేయండి

ప్రధాన 'ని యాక్సెస్ చేయండి div 'క్లాస్ పేరు సహాయంతో కంటైనర్' .ప్రధాన-కంటెంట్ ”:

.ప్రధాన-కంటెంట్ {

వెడల్పు : 40% ;

మార్జిన్ : 0 దానంతట అదే ;

రంగు : నీలం ;

సరిహద్దు : 2px చుక్కలున్నాయి నీలం ;

టెక్స్ట్-అలైన్ : కేంద్రం ;

}

ఇక్కడ:

• ' వెడల్పు ” మూలకం యొక్క వెడల్పు పరిమాణాన్ని నిర్దేశిస్తుంది.
• ' మార్జిన్ ” నిర్వచించిన సరిహద్దు వెలుపల మూలకం చుట్టూ ఖాళీని కేటాయిస్తుంది.
• ' రంగు ” మూలకంలో జోడించిన వచనానికి రంగును నిర్వచిస్తుంది.
• ' సరిహద్దు ” HTMLలో మూలకం చుట్టూ ఒక రూపురేఖలు లేదా సరిహద్దును నిర్వచిస్తుంది.
• ' టెక్స్ట్-సమలేఖనం ” మూలకం యొక్క వచనం యొక్క అమరికను నిర్వచిస్తుంది.

దశ 4: మరొక తరగతిని స్టైల్ చేయండి

CSS ప్రధాన తరగతి మరియు ఇతర సమూహ తరగతుల పేర్లను ఉపయోగించడం ద్వారా వాటిని యాక్సెస్ చేయండి. అప్పుడు, మీ ఎంపిక ప్రకారం విలువను పేర్కొనడం ద్వారా కంటైనర్ వెడల్పును సెట్ చేయండి:

.ప్రధాన-కంటెంట్ .టేబుల్ {

వెడల్పు : 80% ;

}

ఇంకా, పైన పేర్కొన్న విధానాన్ని అనుసరించడం ద్వారా ఇతర తరగతిని యాక్సెస్ చేయండి మరియు దిగువ కోడ్ స్నిప్పెట్‌లో పేర్కొన్న CSS లక్షణాలను వర్తింపజేయండి:

.ప్రధాన-కంటెంట్ .సి-కుడి {

ప్రదర్శన : ఇన్లైన్-బ్లాక్ ;

ఫాంట్ పరిమాణం : 20px ;

}

పై కోడ్ స్నిప్పెట్ ప్రకారం:

• ' ప్రదర్శన ” ఎలిమెంట్ డిస్‌ప్లేను సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
• ' ఫాంట్ పరిమాణం ” కంటైనర్‌లో జోడించిన టెక్స్ట్ పరిమాణాన్ని నిర్దేశిస్తుంది.

ఇప్పుడు, అదే పద్ధతిని ఉపయోగించడం ద్వారా ఇతర తరగతులను యాక్సెస్ చేయండి మరియు దిగువ పేర్కొన్న విధంగా క్రింది CSS లక్షణాలను వర్తింపజేయండి:

.ప్రధాన-కంటెంట్ .c-ఎడమ {

వెడల్పు : 140px ;

మార్జిన్-కుడి : 6px ;

ఫాంట్ పరిమాణం : 16px ;

}

అలా చేయడానికి, మేము దరఖాస్తు చేస్తాము ' వెడల్పు ',' మార్జిన్-కుడి 'మరియు' ఫాంట్ పరిమాణం ” స్టైలింగ్ ప్రయోజనాల కోసం.

అంతేకాకుండా, ప్రధాన 'ని యాక్సెస్ చేయండి div ” ఇతర సమూహ div కంటైనర్‌తో పాటు వారి తరగతి పేరును ఉపయోగించడం ద్వారా కంటైనర్‌ను మరియు క్రింది CSS లక్షణాలను వర్తింపజేయండి

.ప్రధాన .సి-కుడి {

వెడల్పు : దానంతట అదే ;

ఫాంట్ పరిమాణం : 15px ;

రంగు : #fff ;

మార్జిన్-కుడి : 20px ;

ఫాంట్-వెయిట్ : సాధారణ ;

}

అవుట్‌పుట్

మరొక CSS తరగతి లోపల CSS తరగతిని లక్ష్యంగా చేసుకోవడం గురించి అంతే.

ముగింపు

మరొక CSS తరగతిలోని CSS తరగతిని లక్ష్యంగా చేసుకోవడానికి, ముందుగా, ప్రధాన 'ని యాక్సెస్ చేయండి div ”అసైన్డ్ క్లాస్ అట్రిబ్యూట్ ద్వారా. తర్వాత, అదే విధానాన్ని అనుసరించడం ద్వారా మరొక “డివ్” కంటైనర్‌ను యాక్సెస్ చేయండి. ఇంకా, వినియోగదారులు ఇతర CSS తరగతిలోని CSS తరగతిని లక్ష్యంగా చేసుకోవచ్చు. ఈ పోస్ట్ మరొక CSS తరగతిలో CSS తరగతిని లక్ష్యంగా చేసుకునే పద్ధతిని ప్రదర్శించింది.