CSS Combinators

CSS காம்பினேட்டர்களைக் கற்றுக்கொள்ளுங்கள்

CSS Combinators

ஒரு காம்பினேட்டர் என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட செலக்டர்களுக்கு இடையிலான உறவை வரையறுக்கும் ஒன்றாகும்.

ஒரு CSS செலக்டரில் ஒன்றுக்கு மேற்பட்ட செலக்டர்கள் இருக்கலாம். செலக்டர்களுக்கு இடையே, ஒரு காம்பினேட்டரைச் சேர்த்து, மிகவும் குறிப்பிட்ட தேர்வை உருவாக்கலாம்.

CSS இல் நான்கு வெவ்வேறு காம்பினேட்டர்கள் உள்ளன:

Descendant Combinator (space)

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

பின்வரும் எடுத்துக்காட்டு <div> உறுப்புகளுக்குள் உள்ள அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

div p {
  background-color: yellow;
}

💡 உதவிக்குறிப்பு:

இந்த காம்பினேட்டர் ஒரு இடைவெளி மூலம் குறிப்பிடப்படுகிறது. இது மிகவும் பொதுவான CSS தேர்வாகும்.

Child Combinator (>)

சைல்ட் காம்பினேட்டர் ஒரு குறிப்பிட்ட உறுப்பின் நேரடி குழந்தைகளாக உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது.

பின்வரும் எடுத்துக்காட்டு <div> இன் நேரடி குழந்தைகளாக உள்ள அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

div > p {
  background-color: yellow;
}

🔍 கவனிக்க:

சைல்ட் காம்பினேட்டர் (>) டிசெண்டண்ட் காம்பினேட்டரை விட குறுகியது, ஏனெனில் இது நேரடி குழந்தைகளை மட்டுமே தேர்ந்தெடுக்கிறது.

Next Sibling Combinator (+)

நெக்ஸ்ட் சிப்ளிங் காம்பினேட்டர் ஒரு குறிப்பிட்ட உறுப்புக்குப் பிறகு நேரடியாக வரும் உறுப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

சிப்ளிங் உறுப்புகள் ஒரே பெற்றோர் உறுப்பைக் கொண்டிருக்க வேண்டும்.

பின்வரும் எடுத்துக்காட்டு <div> உறுப்புக்குப் பிறகு நேரடியாக வரும் முதல் <p> உறுப்பைத் தேர்ந்தெடுக்கிறது, மேலும் ஒரே பெற்றோரைப் பகிர்ந்து கொள்கிறது:

Example

div + p {
  background-color: yellow;
}

Subsequent-sibling Combinator (~)

சப்ஸீக்வென்ட்-சிப்ளிங் காம்பினேட்டர் ஒரு குறிப்பிட்ட உறுப்பின் அடுத்த சகோதரர்களாக உள்ள அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது.

பின்வரும் எடுத்துக்காட்டு <div> உறுப்பின் அடுத்த சகோதரர்களாக உள்ள அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது, மேலும் ஒரே பெற்றோரைப் பகிர்ந்து கொள்கிறது:

Example

div ~ p {
  background-color: yellow;
}

📊 வேறுபாடு:

+ காம்பினேட்டர் நேரடியாகப் பின்வரும் ஒரே சகோதரரை மட்டும் தேர்ந்தெடுக்கும், அதேசமயம் ~ காம்பினேட்டர் அனைத்து அடுத்த சகோதரர்களையும் தேர்ந்தெடுக்கும்.

CSS Combinators Comparison

Descendant (space)

அனைத்து வழித்தோன்றல் உறுப்புகளும்

Child (>)

நேரடி குழந்தை உறுப்புகள் மட்டுமே

Next Sibling (+)

நேரடியாகப் பின்வரும் முதல் சகோதரர்

Subsequent-sibling (~)

அனைத்து அடுத்த சகோதரர்களும்

Exercise

கீழே உள்ள பயிற்சியை முயற்சிக்கவும்:

❓ எந்த காம்பினேட்டர் ஒரு குறிப்பிட்ட உறுப்பின் நேரடி குழந்தைகளாக உள்ள உறுப்புகளைத் தேர்ந்தெடுக்கிறது?

Child combinator (>)
✗ தவறு! Child combinator (>) என்பது சரியான பதில்
Descendant combinator (space)
✓ சரி! Descendant combinator (space) அனைத்து வழித்தோன்றல்களையும் தேர்ந்தெடுக்கும்
Next sibling combinator (+)
✗ தவறு! Next sibling combinator (+) அடுத்த சகோதரர்களைத் தேர்ந்தெடுக்கும்
Subsequent-sibling combinator (~)
✗ தவறு! Subsequent-sibling combinator (~) அனைத்து அடுத்த சகோதரர்களையும் தேர்ந்தெடுக்கும்

CSS Combinators Reference

அனைத்து CSS காம்பினேட்டர்களின் முழுமையான பட்டியலுக்கு, எங்கள் CSS Combinators Reference ஐப் பார்வையிடவும்.

Jassif Team Reference

CSS காம்பினேட்டர்கள் குறிப்பு

More Examples

கூடுதல் எடுத்துக்காட்டுகள் மற்றும் பயிற்சிகள்