CSS இல் ": nth-child", ": first-child" மற்றும் ": first-of-type"

குறிப்பு

விரிவான விளக்கம்

முதலில், பின்வரும் HTML மாதிரி குறியீட்டைப் பார்ப்போம், இந்த குறியீட்டின் மூலம் மூன்று தேர்வாளர்களின் பயன்பாட்டை ஒவ்வொன்றாக புரிந்துகொள்வோம்.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": Nth-child" விரிவாக விளக்கினார்

மேலே உள்ள குறியீட்டில் css1 இன் பொருள் இரண்டாவது குழந்தை உறுப்பு மற்றும் வகை "div", எனவே div1 மட்டுமே தேர்ந்தெடுக்கப்படுகிறது. div1 என்பது பெற்றோர் கொள்கலனில் இரண்டாவது குழந்தை உறுப்பு மற்றும் வகை "div" ஆகும். p3 என்பது பெற்றோர் கொள்கலனின் இரண்டாவது குழந்தை உறுப்பு, ஆனால் இது "div" வகை அல்ல, எனவே அது தேர்ந்தெடுக்கப்படவில்லை. தேர்வாளருக்கு முன்னால் உள்ள டி.வி.யை அகற்ற பாணியை மாற்றினால், பி 3 யும் தேர்ந்தெடுக்கப்படும்.

": முதல் குழந்தை" விரிவாக விளக்கினார்

மேலே உள்ள குறியீட்டில் css2 இன் பொருள் முதல் குழந்தை உறுப்பு மற்றும் வகை p ஆகும், எனவே p1 மட்டுமே தேர்ந்தெடுக்கப்படுகிறது. p1 என்பது பெற்றோர் கொள்கலனில் முதல் குழந்தை உறுப்பு மற்றும் வகை "p" ஆகும். இது மேலே உள்ள ": nth-child" க்கு ஒத்த பொருளைக் கொண்டுள்ளது. அளவுருவை 1 க்கு அனுப்ப ": nth-child" ஐப் பயன்படுத்தினால், விளைவு சரியாகவே இருக்கும்.

": முதல் வகை" விரிவாக விளக்கப்பட்டுள்ளது

மேலே உள்ள குறியீட்டில் css3 இன் பொருள் என்னவென்றால், முதல் வகை "p" இன் குழந்தை உறுப்பு ஆகும். மேலே உள்ள இரண்டு தேர்வாளர்களிடமிருந்து இங்கே உள்ள வேறுபாடு என்னவென்றால், தொடர்புடைய வகை முதலில் கண்டுபிடிக்கப்பட்டது, பின்னர் அந்த வகைக்கு பொருந்தக்கூடிய முதல் உறுப்பு பெறப்படுகிறது . எனவே தேர்ந்தெடுக்கப்பட்டவை பி 1 மற்றும் பி 3 ஆகும். P1 மற்றும் p3 இரண்டும் பெற்றோர் கொள்கலனில் முதல் "p" கூறுகள்.