CSS: nth-child() தேர்வாளரைப் புரிந்துகொள்வது

உங்களைப் போன்ற வாசகர்கள் MUO ஐ ஆதரிக்க உதவுகிறார்கள். எங்கள் தளத்தில் உள்ள இணைப்புகளைப் பயன்படுத்தி நீங்கள் வாங்கும் போது, ​​நாங்கள் ஒரு இணை கமிஷனைப் பெறலாம். மேலும் படிக்க.

அனைத்து CSS தேர்வாளர்களைப் போலவே, நீங்கள் வலைப்பக்கத்தில் உள்ள கூறுகளை அடையாளம் கண்டு அவற்றிற்கு பாணிகளைப் பயன்படுத்த :nth-child() ஐப் பயன்படுத்தலாம். ஆனால் இந்த தேர்வாளர், உடன்பிறப்புகளின் ஒரு தொகுப்பை அவர்களின் உறவினர் நிலையின் அடிப்படையில் சுருக்கிக் கொள்ள உங்களை அனுமதிக்கிறது.

அன்றைய MUO வீடியோ உள்ளடக்கத்துடன் தொடர உருட்டவும்

தேர்வாளர் பொதுவான நிகழ்வுகளுக்கான சில அடிப்படை முக்கிய வார்த்தைகளை ஆதரிக்கிறது, ஆனால் இது ஒரு சக்திவாய்ந்த பேட்டர்ன்-பொருந்தும் தொடரியல் வழங்குகிறது. இதைப் பயன்படுத்தி, உங்கள் தேவைகளின் அடிப்படையில் வழக்கமான, மீண்டும் மீண்டும் வடிவங்கள் அல்லது மிகவும் சிக்கலான வரையறைகளின் அடிப்படையில் கூறுகளைத் தேர்ந்தெடுக்கலாம்.

---

---

:nth-child() தேர்வி தொடரியல்

என CSS போலி-வகுப்பு தேர்வி , :nth-child() தொடரியல் மற்ற தேர்வாளர்களிடமிருந்து வேறுபடுகிறது. உடன்பிறப்புகளின் தொகுப்பில் உள்ள கூறுகளைப் பொருத்துவதற்கான ஒரு வடிவமாக இது ஒரு வாதத்தை எடுக்கும்:

சலிப்படையும்போது ஆன்லைனில் செய்ய வேண்டிய பயனுள்ள விஷயங்கள்

 :nth-child(args) { 
    /*...*/ 
}

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

பொதுவான வழக்குகளுக்கான முக்கிய மதிப்புகளைப் பயன்படுத்துதல்

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

இந்த முக்கிய மதிப்புகளை நீங்கள் எப்போது பயன்படுத்தலாம் என்பதற்கு ஒரு எளிய ஆர்டர் பட்டியல் மற்றொரு சிறந்த எடுத்துக்காட்டு:

 <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

பயன்படுத்தி : ஒன்பதாவது குழந்தை (ஒற்றைப்படை) தேர்வாளர், நீங்கள் ஒவ்வொரு மாற்று பொருளின் நிறத்தையும் மாற்றலாம்:

---

---

 :nth-child(odd) { 
    color: red; 
}

உருப்படிகள் குறியீட்டு 1 இல் தொடங்குகின்றன, எனவே முதல் உருப்படி சிவப்பு நிறத்தில் தோன்றும், பின்னர் மூன்றாவது, மற்றும் பல:

அதிக நெகிழ்வுத்தன்மைக்கான செயல்பாட்டுக் குறியீடு

இது போன்ற தனிப்பட்ட உறுப்பைத் தேர்ந்தெடுக்க ஒற்றை முழு எண்ணைப் பயன்படுத்தலாம்:

---

---

 li:nth-child(4) { 
    color: red; 
}

இந்த வழக்கில், தேர்வாளர் பட்டியலில் உள்ள நான்காவது உருப்படியுடன் மட்டுமே பொருந்துகிறார்:

இந்த தொடரியல் என்பது மிகவும் பொதுவான செயல்பாட்டு தொடரியல் ஒரு சிறப்பு நிகழ்வாகும், இது கொடுக்கப்பட்ட வடிவத்துடன் பொருந்தக்கூடிய உருப்படிகளைத் தேர்ந்தெடுக்கிறது. இந்த தொடரியல்:

 :nth-child(An+B) { 
    /*...*/ 
}

இந்த குறிப்பில், ஏ படி அளவு உள்ளது. அடுத்த உருப்படியைத் தேர்ந்தெடுக்க தேர்வாளர் எத்தனை முறை நகர்த்துகிறார் என்பது இதன் பொருள். இது மற்ற ஒவ்வொரு உருப்படியையும், ஒவ்வொரு மூன்றாவது உருப்படியையும் தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது. பி தேர்வு தொடங்கும் தொடக்க புள்ளியாகும்.

எடுத்துக்காட்டாக, 3n+1 வாதத்தை எடுத்துக் கொள்ளுங்கள்:

 li:nth-child(3n+1) { 
    color: red; 
}

இது முதல் உருப்படியில் தேர்வைத் தொடங்கும் மற்றும் அதன் பிறகு ஒவ்வொரு மூன்றாவது உருப்படியிலும் தொடரும்:

இதை 3n+2 என்ற வெளிப்பாட்டுடன் ஒப்பிடுக:

சிம் வழங்கப்படாத மிம்#2 ஐ எப்படி சரிசெய்வது

 li:nth-child(3n+2) { 
    color:red; 
}

இது இன்னும் ஒவ்வொரு மூன்றாவது உருப்படியையும் தேர்ந்தெடுக்கிறது, ஆனால் இப்போது அது பட்டியலில் உள்ள இரண்டாவது உருப்படியிலிருந்து தொடங்குகிறது:

மற்றொரு சுவாரஸ்யமான உதாரணம்: nth-child(n+3):

 li:nth-child(n+3) { 
    color: red; 
}

இது மூன்றில் இருந்து (+3) தொடங்கி ஒவ்வொரு உருப்படியையும் (n) தேர்ந்தெடுக்கும். இது இப்படி இருக்கும்:

குறிப்பிட்ட முடிவுகளை அடைய, கழித்தலையும் பயன்படுத்தலாம்:

 li:nth-child(3n-1) { 
    color: red; 
}

இந்த எடுத்துக்காட்டு இன்னும் ஒவ்வொரு மூன்றாவது உருப்படியையும் தேர்ந்தெடுக்கிறது, ஆனால் அது 'கழித்தல் முதல்' இலிருந்து தொடங்குகிறது. இதன் விளைவாக, இது பட்டியலில் உள்ள இரண்டாவது உருப்படியைத் தேர்ந்தெடுக்கும், பின்னர் ஐந்தாவது, மற்றும் பல:

தொடரியல்

நீங்கள் முக்கிய சொல்லையும் பயன்படுத்தலாம் இன் தொடர்ந்து ஏ தேர்வாளர் :nth-child() தேர்வியில் ஒரு வாதமாக. வழக்கமான பேட்டர்ன் தேர்ந்தெடுக்கும் சாத்தியமான உருப்படிகளைக் குறைக்க இந்த தொடரியல் உங்களை அனுமதிக்கிறது.

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

 <ol> 
    <li class="old">Item 1</li> 
    <li class="new">Item 2</li> 
    <li class="new">Item 3</li> 
    <li class="old">Item 4</li> 
    <li class="new">Item 5</li> 
    <li class="new">Item 6</li> 
    <li class="new">Item 7</li> 
</ol>

இப்போது, ​​ஒரு குறிப்பிட்ட வகுப்பைக் கொண்டவர்களின் தொகுப்பிலிருந்து சீரான உருப்படிகளைத் தேர்ந்தெடுக்க: nth-child ஐப் பயன்படுத்தவும்:

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.new) { 
    color: red; 
}

இரட்டை எண்ணுள்ள தடிமனான உருப்படிகள் மட்டும் எப்படி சிவப்பு நிறத்தில் உள்ளன என்பதைக் கவனியுங்கள்:

இது எவ்வாறு வேறுபடுகிறது என்பதையும் கவனியுங்கள் li.new:nth-child(கூட) இது .புதிய கூறுகளை குறிவைக்கிறது, ஆனால் அவை சமமாக இருந்தால் மட்டுமே. இது மேலே உள்ள எடுத்துக்காட்டில் 2 மற்றும் 6 உருப்படிகளாக இருக்கும்.

:nth-child() தேர்வாளருடன் பணிபுரிதல்

:nth-child() தேர்வியைப் பயன்படுத்தி தனித்துவமான வடிவமைப்புகளை நீங்கள் அடையலாம். நீங்கள் வண்ணமயமான வலைத்தளங்களை உருவாக்கலாம் மற்றும் தரவு அட்டவணையில் வரிசைகள் மற்றும் நெடுவரிசைகளை முன்னிலைப்படுத்தலாம். மற்ற CSS தேர்வாளர்களுடன் இதை இணைப்பது சிக்கலான தளவமைப்புகள் மற்றும் வடிவமைப்புகளை உருவாக்க உதவும்.