” మూలకం, అప్పుడు మేము పిల్లలను పట్టుకోవడం ద్వారా మాతృ మూలకం యొక్క స్టైలింగ్‌ని సర్దుబాటు చేయవచ్చు. ఈ ప్రయోజనం కోసం, మేము ఉపయోగించవచ్చు ' :హస్() ” సెలెక్టర్.

“

” మూలకాలు రెండింటి నుండి, “ని ఉపయోగించి “

” మూలకం ఉన్న దానిని ఎంచుకోండి .class-name:has(పిల్లల పేరు) ”:

.parent-div : కలిగి ఉంది ( h1 ) {

నేపథ్య రంగు : #103e6d ;

రంగు : సముద్రపు షెల్ ;

వెడల్పు : 150px ;

ఎత్తు : 150px ;

సరిహద్దు-వ్యాసార్థం : యాభై% ;

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

}

ఇక్కడ, మేము మాతృ మూలకంపై క్రింది CSS లక్షణాలను వర్తింపజేసాము:

---

---

• ' నేపథ్య రంగు మూలకం యొక్క నేపథ్య రంగును పేర్కొనడానికి ” ఉపయోగించబడుతుంది.
• ' రంగు ” మూలకం టెక్స్ట్ రంగును నిర్దేశిస్తుంది.
• ' వెడల్పు ” మూలకం వెడల్పును నిర్వచించడానికి ఉపయోగించబడుతుంది.
• ' ఎత్తు ” మూలకం యొక్క ఎత్తును నిర్దేశిస్తుంది.
• ' సరిహద్దు-వ్యాసార్థం మూలకం యొక్క గుండ్రని మూలలను సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది.
• ' టెక్స్ట్-అలైన్ ” వచన అమరికను నిర్దేశిస్తుంది.

అవుట్‌పుట్

అన్ని చైల్డ్ ఎలిమెంట్స్‌ను ఎలా ఎంచుకోవాలి?

పేరెంట్ సెలెక్టర్ సహాయంతో చైల్డ్ ఎలిమెంట్‌ను ఎంచుకోవడానికి, ఇవ్వబడిన ఉదాహరణ ద్వారా వెళ్లండి.

ఉదాహరణ

HTML పేజీని సృష్టించడానికి క్రింది దశలను అమలు చేయండి:

• రెండు 'ని కలిగి ఉన్న ఒక div మూలకాన్ని జోడించండి

  'ట్యాగ్‌లు మరియు ఒక'

  'క్లాస్ కలిగి ఉన్న ట్యాగ్' చైల్డ్-డివి ”.
• పిల్లవాడు ' div ” మూలకం “

  ” మూలకాన్ని కలిగి ఉంది:

< div తరగతి = 'తల్లిదండ్రులు-డివి' >

< p > హలో < / p >

< p > ప్రపంచం < / p >

< div తరగతి = 'చైల్డ్-డివ్' >

< p > నేను చైల్డ్ డివిని < / p >

< / div >

< / div >

మేము పేరెంట్ ద్వారా చైల్డ్ ఎలిమెంట్‌లను ఎంచుకోవచ్చు '

” తరగతి. ఇది దాని ప్రత్యక్షంగా ఎంపిక చేయడమే కాదు ' p 'మూలకాలు కానీ సమూహాన్ని కూడా ఎంచుకుంటాయి' p 'మూలకాలు:

.parent-div p {

నేపథ్య రంగు : #7F167F ;

ఫాంట్ కుటుంబం : కర్సివ్ ;

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

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

రంగు : తెల్లటి పొగ ;

}

అవుట్‌పుట్

అన్ని డైరెక్ట్ చిల్డ్రన్ ఎలిమెంట్స్‌ని ఎలా ఎంచుకోవాలి?

పేరెంట్ డివి యొక్క డైరెక్ట్ చైల్డ్‌ని ఎంచుకోవడానికి, మేము ' > ' చిహ్నం. ఇది పేరెంట్ యొక్క డైరెక్ట్ చైల్డ్ అయిన అన్ని 'p' ఎలిమెంట్లను ఎంచుకోవడానికి సహాయపడుతుంది '

”. ఉదాహరణకు, మేము ఈ క్రింది CSS లక్షణాలను వర్తింపజేసాము:

.parent-div > p {

నేపథ్య రంగు : #7F167F ;

ఫాంట్ కుటుంబం : కర్సివ్ ;

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

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

రంగు : తెల్లటి పొగ ;

}

ది ' ఫాంట్ కుటుంబం ” ఎంచుకున్న మూలకం యొక్క ఫాంట్‌ను నిర్దేశిస్తుంది మరియు “ ఫాంట్ పరిమాణం ” ఫాంట్ పరిమాణాన్ని నిర్వచించడానికి ఉపయోగించబడుతుంది:

అవుట్‌పుట్

మేము HTML మరియు CSSలో CSS పేరెంట్ సెలెక్టర్ల గురించి చర్చించాము.

ముగింపు

CSS లో, ' :హస్() ” సెలెక్టర్ పేరెంట్ సెలెక్టర్ సూడో-క్లాస్‌గా ఉపయోగించబడుతుంది. ఇది పేరెంట్ ఎలిమెంట్‌లను ఎంచుకోవడానికి ప్రత్యేకంగా ఉపయోగించబడుతుంది. ఉదాహరణకి, ' .parent-div:has(h1) '' కలిగి ఉన్న మాతృ మూలకాన్ని ఎంచుకుంటుంది

”మూలకాలు. పేరెంట్ ఎలిమెంట్ యొక్క చైల్డ్ ఎలిమెంట్‌ని ఎంచుకోవడానికి, “ని ఉపయోగించండి .తల్లిదండ్రులు-డివి పి ”. కండిషన్ స్టేట్‌మెంట్ అన్ని డైరెక్ట్ చైల్డ్ ఎలిమెంట్‌లను ఎంచుకోవడానికి కూడా ఉపయోగించవచ్చు. ఈ కథనం CSS పేరెంట్ సెలెక్టర్‌ను ఉదాహరణలతో వివరించింది.