'உறுப்பு, பின்னர் குழந்தையைப் பிடித்துக்கொண்டு பெற்றோர் உறுப்பின் ஸ்டைலிங்கை சரிசெய்யலாம். இந்த நோக்கத்திற்காக, நாம் பயன்படுத்த முடியும் ' :has() ” தேர்வாளர்.

இரண்டு “

” உறுப்புகளிலிருந்தும், “

” உறுப்பைக் கொண்டுள்ள ஒன்றைத் தேர்ந்தெடுக்கவும். .class-name:has(குழந்தை-பெயர்) ”:

.parent-div : உள்ளது ( h1 ) {

பின்னணி நிறம் : #103e6d ;

நிறம் : கடல் ஓடு ;

அகலம் : 150px ;

உயரம் : 150px ;

எல்லை-ஆரம் : ஐம்பது% ;

உரை-சீரமைப்பு : மையம் ;

}

இங்கே, பின்வரும் CSS பண்புகளை மூல உறுப்பில் பயன்படுத்தியுள்ளோம்:

---

---

• ' பின்னணி நிறம் 'உறுப்பின் பின்னணி நிறத்தைக் குறிப்பிடப் பயன்படுகிறது.
• ' நிறம் ” உறுப்பு உரை நிறத்தைக் குறிப்பிடுகிறது.
• ' அகலம் ” உறுப்பு அகலத்தை வரையறுக்கப் பயன்படுகிறது.
• ' உயரம் ” என்பது தனிமத்தின் உயரத்தைக் குறிப்பிடுகிறது.
• ' எல்லை-ஆரம் 'உறுப்பின் வட்டமான மூலைகளை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
• ' உரை-சீரமைப்பு ” உரை சீரமைப்பைக் குறிப்பிடுகிறது.

வெளியீடு

அனைத்து குழந்தை கூறுகளையும் எவ்வாறு தேர்வு செய்வது?

பெற்றோர் தேர்வாளரின் உதவியுடன் குழந்தை உறுப்பைத் தேர்ந்தெடுக்க, கொடுக்கப்பட்ட உதாரணத்தைப் பார்க்கவும்.

உதாரணமாக

HTML பக்கத்தை உருவாக்க, பின்வரும் படிகளைச் செயல்படுத்தவும்:

• இரண்டைக் கொண்ட ஒரு div உறுப்பைச் சேர்க்கவும் '

  'குறிச்சொற்கள் மற்றும் ஒரு'

  'குறிச்சொல் வகுப்பைக் கொண்டுள்ளது' குழந்தை-டிவி ”.
• குழந்தை ' div ”உறுப்பில் “

  ” உறுப்பு உள்ளது:

< div வர்க்கம் = 'பெற்றோர் பிரிவு' >

< ப > வணக்கம் < / ப >

< ப > உலகம் < / ப >

< div வர்க்கம் = 'குழந்தை பிரிவு' >

< ப > நான் குழந்தை டிவி < / ப >

< / div >

< / div >

பெற்றோர் மூலம் குழந்தை கூறுகளை நாம் தேர்ந்தெடுக்கலாம் '

' வர்க்கம். இது அதன் நேரடியைத் தேர்ந்தெடுக்காது ' ப 'உறுப்புகள் ஆனால் உள்ளமையையும் தேர்ந்தெடுக்கிறது' ப 'கூறுகள்:

.parent-div ப {

பின்னணி நிறம் : #7F167F ;

எழுத்துரு குடும்பம் : கர்சீவ் ;

எழுத்துரு அளவு : 25px ;

உரை-சீரமைப்பு : மையம் ;

நிறம் : வெள்ளை புகை ;

}

வெளியீடு

அனைத்து நேரடி குழந்தை கூறுகளையும் எவ்வாறு தேர்ந்தெடுப்பது?

பெற்றோரின் நேரடி குழந்தையைத் தேர்ந்தெடுக்க, நாம் ' > ” சின்னம். இது பெற்றோரின் நேரடி குழந்தையான அனைத்து 'p' கூறுகளையும் தேர்ந்தெடுக்க உதவும்.

”. எடுத்துக்காட்டாக, பின்வரும் CSS பண்புகளைப் பயன்படுத்தியுள்ளோம்:

.parent-div > ப {

பின்னணி நிறம் : #7F167F ;

எழுத்துரு குடும்பம் : கர்சீவ் ;

எழுத்துரு அளவு : 30px ;

உரை-சீரமைப்பு : மையம் ;

நிறம் : வெள்ளை புகை ;

}

' எழுத்துரு குடும்பம் 'தேர்ந்தெடுக்கப்பட்ட உறுப்பின் எழுத்துருவைக் குறிப்பிடுகிறது மற்றும் ' எழுத்துரு அளவு 'எழுத்துருவின் அளவை வரையறுக்கப் பயன்படுகிறது:

வெளியீடு

HTML மற்றும் CSS இல் CSS பெற்றோர் தேர்வாளர்கள் பற்றி நாங்கள் விவாதித்தோம்.

முடிவுரை

CSS இல், ' :has() 'தேர்ந்தெடுப்பு ஒரு பெற்றோர் தேர்வாளராகப் பயன்படுத்தப்படுகிறது போலி-வகுப்பு. இது குறிப்பாக பெற்றோர் கூறுகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது. உதாரணமாக, ' .parent-div:has(h1) '' கொண்ட மூல உறுப்பைத் தேர்ந்தெடுக்கிறது

'கூறுகள். மூல உறுப்பின் குழந்தை உறுப்பைத் தேர்ந்தெடுக்க, பயன்படுத்தவும் ' .பெற்றோர்-டிவி ப ”. அனைத்து நேரடி குழந்தை கூறுகளையும் தேர்ந்தெடுக்க நிபந்தனை அறிக்கை பயன்படுத்தப்படலாம். இந்த கட்டுரை CSS பெற்றோர் தேர்வியை எடுத்துக்காட்டுகளுடன் விளக்கியுள்ளது.