CSS நிலை சூடோ-கிளாஸ்கள்: டைனமிக் ஸ்டைலிங்கிற்கான மேம்பட்ட எலிமெண்ட் தேர்வு

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

CSS சூடோ-கிளாஸ்களைப் புரிந்துகொள்ளுதல்

நிலை சூடோ-கிளாஸ்களுக்குள் செல்வதற்கு முன், CSS-ல் சூடோ-கிளாஸ்கள் என்றால் என்ன என்பதைச் சுருக்கமாகப் பார்ப்போம். சூடோ-கிளாஸ்கள் என்பது செலக்டர்களுடன் சேர்க்கப்படும் முக்கிய வார்த்தைகளாகும், அவை தேர்ந்தெடுக்கப்பட்ட எலிமெண்ட்(களின்) ஒரு சிறப்பு நிலையைக் குறிப்பிடுகின்றன. அவை எலிமெண்ட்களை அவற்றின் பெயர், பண்புகள் அல்லது உள்ளடக்கத்தைத் தவிர வேறு காரணிகளின் அடிப்படையில் ஸ்டைல் செய்ய உங்களை அனுமதிக்கின்றன; மாறாக அவை அவற்றின் நிலை, அவற்றின் ஸ்டேட் அல்லது பிற டைனமிக் அளவுகோல்களின் அடிப்படையில் ஸ்டைல் செய்கின்றன. உதாரணமாக, :hover சூடோ-கிளாஸ், பயனர் ஒரு எலிமெண்டின் மீது மவுஸை வைக்கும்போது ஸ்டைல்களைப் பயன்படுத்துகிறது.

நிலை சூடோ-கிளாஸ்களுக்கான அறிமுகம்

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

முக்கிய நிலை சூடோ-கிளாஸ்கள்

1. :first-child

:first-child சூடோ-கிளாஸ் அதன் பேரண்ட்டிற்குள் உள்ள முதல் சைல்டு எலிமெண்ட்டைத் தேர்ந்தெடுக்கிறது. இது ஒரு பட்டியலில் முதல் உருப்படி, ஒரு அட்டவணையில் முதல் வரிசை அல்லது ஆரம்ப எலிமெண்ட்டை முன்னிலைப்படுத்த விரும்பும் வேறு எந்த சூழ்நிலைக்கும் குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்த பயனுள்ளதாக இருக்கும்.

உதாரணம்: ஒரு நேவிகேஷன் மெனுவில் முதல் பட்டியல் உருப்படிக்கு ஸ்டைல் செய்தல்.

nav ul li:first-child {
  font-weight: bold;
  color: #007bff;
}

இந்த CSS கோட், <nav> எலிமெண்ட்டின் <ul>-ல் உள்ள முதல் பட்டியல் உருப்படியை தடிமனாகவும் நீல நிறமாகவும் மாற்றும்.

நடைமுறைப் பயன்பாடு: ஒரு இ-காமர்ஸ் வலைத்தளத்தை கற்பனை செய்து பாருங்கள். நீங்கள் :first-child-ஐப் பயன்படுத்தி ஒரு சிறப்புப் பொருட்கள் பிரிவில் முதல் பொருளை பார்வைக்கு முன்னிலைப்படுத்தலாம்.

2. :last-child

:last-child சூடோ-கிளாஸ், இதற்கு நேர்மாறாக, அதன் பேரண்ட்டிற்குள் உள்ள கடைசி சைல்டு எலிமெண்ட்டைத் தேர்ந்தெடுக்கிறது. இது கடைசி உருப்படியைத் தவிர மற்ற எல்லா உருப்படிகளுக்கும் ஒரு பார்டர் அல்லது மார்ஜின் சேர்க்க, அல்லது ஒரு தொடரில் உள்ள இறுதி எலிமெண்ட்டிற்கு ஒரு குறிப்பிட்ட ஸ்டைலைப் பயன்படுத்த இது சரியானது.

உதாரணம்: ஒரு பட்டியலில் கடைசி உருப்படியிலிருந்து கீழ் பார்டரை அகற்றுதல்.

ul li {
  border-bottom: 1px solid #ccc;
}

ul li:last-child {
  border-bottom: none;
}

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

நடைமுறைப் பயன்பாடு: ஒரு தொடர்புப் படிவத்தில், சமர்ப்பிக்கும் பொத்தானுக்கு முன் உள்ள கடைசி உள்ளீட்டுப் புலத்திலிருந்து கீழ் மார்ஜினை அகற்ற நீங்கள் :last-child-ஐப் பயன்படுத்தலாம்.

3. :nth-child(n)

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

உதாரணம்: ஒரு அட்டவணையில் ஒவ்வொரு இரண்டாவது வரிசைக்கும் ஸ்டைல் செய்தல்.

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

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

உதாரணம்: மூன்றாவது சைல்டைத் தேர்ந்தெடுத்தல்.

div p:nth-child(3) {
  color: green;
}

இந்த CSS கோட், ஒரு <div> எலிமெண்ட்டிற்குள் உள்ள மூன்றாவது பாராகிராஃபை பச்சை நிறமாக மாற்றும்.

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

ul li:nth-child(3n) {
  font-style: italic;
}

இந்த CSS கோட், ஒவ்வொரு மூன்றாவது பட்டியல் உருப்படிக்கும் சாய்வு ஸ்டைலிங்கைப் பயன்படுத்தும்.

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

4. :nth-of-type(n)

:nth-of-type(n) சூடோ-கிளாஸ் :nth-child(n)-ஐப் போன்றது, ஆனால் இது எலிமெண்ட்களை அவற்றின் பேரண்ட்டிற்குள் அவற்றின் வகையின் அடிப்படையில் இலக்காகக் கொள்கிறது. அதாவது, இது எண்ணும்போது ஒரே வகையிலான எலிமெண்ட்களை மட்டுமே கருத்தில் கொள்ளும்.

உதாரணம்: ஒரு div-க்குள் உள்ள இரண்டாவது பாராகிராஃபிற்கு ஸ்டைல் செய்தல்.

div p:nth-of-type(2) {
  font-size: 1.2em;
}

இந்த CSS கோட், ஒரு <div>-க்குள் உள்ள இரண்டாவது பாராகிராஃப் எலிமெண்ட்டின் எழுத்துரு அளவை அதிகரிக்கும். இது எண்ணும் போது div-க்குள் உள்ள வேறு எந்த எலிமெண்ட் வகைகளையும் புறக்கணிக்கும்.

நடைமுறைப் பயன்பாடு: ஒரு வலைப்பதிவு இடுகையில், பாராகிராஃப்கள் அல்லது தலைப்புகள் போன்ற பிற எலிமெண்ட்கள் இருந்தாலும், ஒவ்வொரு இரண்டாவது படத்தையும் வித்தியாசமாக ஸ்டைல் செய்ய நீங்கள் :nth-of-type(n)-ஐப் பயன்படுத்தலாம்.

5. :first-of-type

:first-of-type சூடோ-கிளாஸ் அதன் பேரண்ட்டிற்குள் அதன் வகையின் முதல் எலிமெண்ட்டைத் தேர்ந்தெடுக்கிறது. இது ஒரு கண்டெய்னருக்குள் உள்ள முதல் பாராகிராஃப், படம் அல்லது வேறு எந்த குறிப்பிட்ட வகை எலிமெண்ட்டிற்கும் ஸ்டைல் செய்யப் பயன்படும்.

உதாரணம்: ஒரு கட்டுரைக்குள் உள்ள முதல் படத்திற்கு ஸ்டைல் செய்தல்.

article img:first-of-type {
  float: left;
  margin-right: 10px;
}

இந்த CSS கோட், ஒரு <article> எலிமெண்ட்டில் உள்ள முதல் படத்தை இடதுபுறமாக மிதக்க வைத்து அதன் வலதுபுறத்தில் ஒரு மார்ஜினைச் சேர்க்கும்.

நடைமுறைப் பயன்பாடு: ஒரு தயாரிப்பு விளக்கப் பக்கத்தில், முக்கிய தயாரிப்புப் படத்தை முக்கியமாகக் காட்ட நீங்கள் :first-of-type-ஐப் பயன்படுத்தலாம்.

6. :last-of-type

:last-of-type சூடோ-கிளாஸ் அதன் பேரண்ட்டிற்குள் அதன் வகையின் கடைசி எலிமெண்ட்டைத் தேர்ந்தெடுக்கிறது. இது :first-of-type-இன் எதிர்நிலையாகும், மேலும் ஒரு கண்டெய்னருக்குள் ஒரு குறிப்பிட்ட வகையின் இறுதி எலிமெண்ட்டை ஸ்டைல் செய்யப் பயன்படுகிறது.

உதாரணம்: ஒரு பிரிவில் உள்ள கடைசி பாராகிராஃபிற்கு ஸ்டைல் செய்தல்.

section p:last-of-type {
  margin-bottom: 0;
}

இந்த CSS கோட், ஒரு <section>-க்குள் உள்ள கடைசி பாராகிராஃப் எலிமெண்ட்டிலிருந்து கீழ் மார்ஜினை நீக்குகிறது.

நடைமுறைப் பயன்பாடு: ஒரு வலைப்பதிவு இடுகையில், ஒரு சுத்தமான காட்சி முடிவை உருவாக்க, முடிவான பாராகிராஃபில் இருந்து கீழ் மார்ஜினை அகற்ற நீங்கள் :last-of-type-ஐப் பயன்படுத்தலாம்.

நிஜ-உலக பயன்பாட்டு வழக்குகள் மற்றும் எடுத்துக்காட்டுகள்

நிஜ-உலக சூழ்நிலைகளில் நிலை சூடோ-கிளாஸ்கள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை விளக்கும் சில சிக்கலான மற்றும் நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

1. ஒரு நேவிகேஷன் மெனுவிற்கு ஸ்டைல் செய்தல்

நேவிகேஷன் மெனுக்கள் வலைத்தளங்களில் ஒரு பொதுவான அம்சம், மற்றும் நிலை சூடோ-கிளாஸ்கள் அவற்றின் தோற்றத்தை மேம்படுத்தப் பயன்படும்.

<nav>
  <ul>
    <li><a href="#home">முகப்பு</a></li>
    <li><a href="#about">பற்றி</a></li>
    <li><a href="#services">சேவைகள்</a></li>
    <li><a href="#contact">தொடர்புக்கு</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:first-child {
  font-weight: bold;
}

nav ul li:last-child {
  margin-right: 0;
}

இந்தக் கோட் நேவிகேஷன் மெனுவை கிடைமட்டமாக ஸ்டைல் செய்கிறது, புல்லட் புள்ளிகளை நீக்குகிறது, மற்றும் முதல் உருப்படியை தடிமனாக்குகிறது. இது கடைசி உருப்படியிலிருந்து வலது மார்ஜினையும் நீக்குகிறது, சரியான இடைவெளியை உறுதி செய்கிறது.

2. ஒரு தயாரிப்புப் பட்டியலுக்கு ஸ்டைல் செய்தல்

இ-காமர்ஸ் வலைத்தளங்கள் பெரும்பாலும் தயாரிப்புகளை ஒரு கட்டம் அல்லது பட்டியல் வடிவத்தில் காண்பிக்கின்றன. நிலை சூடோ-கிளாஸ்கள் பார்வைக்கு ஈர்க்கக்கூடிய தயாரிப்புப் பட்டியல்களை உருவாக்கப் பயன்படும்.

<div class="product-list">
  <div class="product"><img src="product1.jpg" alt="Product 1"><p>பொருள் 1 விவரம்</p></div>
  <div class="product"><img src="product2.jpg" alt="Product 2"><p>பொருள் 2 விவரம்</p></div>
  <div class="product"><img src="product3.jpg" alt="Product 3"><p>பொருள் 3 விவரம்</p></div>
  <div class="product"><img src="product4.jpg" alt="Product 4"><p>பொருள் 4 விவரம்</p></div>
</div>

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
}

.product:nth-child(odd) {
  background-color: #f9f9f9;
}

இந்தக் கோட் தயாரிப்புகளை இரண்டு-நெடுவரிசைக் கட்டத்தில் காண்பிக்கிறது மற்றும் ஒவ்வொரு தயாரிப்பிற்கும் ஒரு பார்டரைச் சேர்க்கிறது. இது ஒவ்வொரு ஒற்றைப்படை எண் தயாரிப்பிற்கும் ஒரு வெளிர் சாம்பல் பின்னணியைப் பயன்படுத்துகிறது, காட்சி வேறுபாட்டை மேம்படுத்துகிறது.

3. ஒரு அட்டவணைக்கு ஸ்டைல் செய்தல்

அட்டவணைகள் பொதுவாக அட்டவணைத் தரவைக் காட்டப் பயன்படுகின்றன. நிலை சூடோ-கிளாஸ்கள் அட்டவணை வாசிப்புத்திறனையும் தோற்றத்தையும் மேம்படுத்தலாம்.

<table>
  <thead>
    <tr>
      <th>பெயர்</th>
      <th>வயது</th>
      <th>நாடு</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ஜான் டோ</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>ஜேன் ஸ்மித்</td>
      <td>25</td>
      <td>கனடா</td>
    </tr>
    <tr>
      <td>டேவிட் லீ</td>
      <td>40</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

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

நிலை சூடோ-கிளாஸ்களை மற்ற செலக்டர்களுடன் இணைத்தல்

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

உதாரணம்: ஒரு குறிப்பிட்ட கிளாஸுடன் முதல் உருப்படிக்கு ஸ்டைல் செய்தல்.

ul li.highlight:first-child {
  color: red;
}

இந்த CSS கோட், "highlight" என்ற கிளாஸைக் கொண்ட முதல் பட்டியல் உருப்படிக்கு மட்டுமே சிவப்பு நிறத்தைப் பயன்படுத்தும்.

உலாவி இணக்கத்தன்மை

நிலை சூடோ-கிளாஸ்கள் Chrome, Firefox, Safari, Edge, மற்றும் Opera உள்ளிட்ட நவீன வலை உலாவிகளால் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், சீரான ரெண்டரிங்கை உறுதிசெய்ய உங்கள் CSS கோடை வெவ்வேறு உலாவிகளில் சோதிப்பது எப்போதும் ஒரு நல்ல நடைமுறையாகும்.

சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

• செமாண்டிக் HTML-ஐப் பயன்படுத்தவும்: உங்கள் HTML கட்டமைப்பு தர்க்கரீதியாகவும் செமாண்டிக்காகவும் இருப்பதை உறுதிசெய்யுங்கள், ஏனெனில் இது நிலை சூடோ-கிளாஸ்களுடன் எலிமெண்ட்களை இலக்கு வைப்பதை எளிதாக்கும்.
• அதிகப்படியான-குறிப்பிடுதலைத் தவிர்க்கவும்: செலக்டர்களை இணைப்பது சக்திவாய்ந்ததாக இருந்தாலும், பராமரிக்க கடினமாக இருக்கும் அதிகப்படியான குறிப்பிட்ட விதிகளை உருவாக்குவதைத் தவிர்க்கவும்.
• வெவ்வேறு உலாவிகளில் சோதிக்கவும்: இணக்கத்தன்மை மற்றும் சீரான ரெண்டரிங்கை உறுதிசெய்ய உங்கள் CSS கோடை வெவ்வேறு உலாவிகளில் எப்போதும் சோதிக்கவும்.
• செயல்திறனைக் கருத்தில் கொள்ளுங்கள்: நிலை சூடோ-கிளாஸ்கள் பொதுவாக திறமையானவை என்றாலும், பெரிய தரவுத்தொகுப்புகளில் சிக்கலான செலக்டர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இது செயல்திறனைப் பாதிக்கலாம்.
• கமெண்ட்களைப் பயன்படுத்தவும்: உங்கள் செலக்டர்களின் நோக்கத்தை விளக்க உங்கள் CSS கோடில் கமெண்ட்களைச் சேர்க்கவும், மற்றவர்களுக்கு (அல்லது எதிர்காலத்தில் உங்களுக்கே) புரிந்துகொள்வதை எளிதாக்கவும்.

முடிவுரை

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

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

மேலும் அறிய

CSS நிலை சூடோ-கிளாஸ்கள் பற்றிய உங்கள் புரிதலை ஆழப்படுத்த, பின்வரும் ஆதாரங்களை ஆராய்வதைக் கருத்தில் கொள்ளுங்கள்:

• MDN வலை ஆவணங்கள்: :nth-child
• W3Schools CSS :nth-child செலக்டர்
• CSS-Tricks: :nth-child

மகிழ்ச்சியான ஸ்டைலிங்!