CSS Selectors

CSS தேர்விகள்

CSS தேர்விகள்

CSS தேர்விகள் நீங்கள் ஸ்டைல் செய்ய விரும்பும் HTML உறுப்புகளை "கண்டுபிடிக்க" (அல்லது தேர்ந்தெடுக்க) பயன்படுத்தப்படுகின்றன.

CSS தேர்விகளை நாம் ஐந்து வகைகளாகப் பிரிக்கலாம்:

இந்தப் பக்கம் மிக அடிப்படையான CSS தேர்விகளை விளக்கும்.

CSS உறுப்பு தேர்வி

உறுப்பு தேர்வி உறுப்புப் பெயரின் அடிப்படையில் HTML உறுப்புகளைத் தேர்ந்தெடுக்கிறது.

எடுத்துக்காட்டு

இங்கே, பக்கத்தில் உள்ள அனைத்து <p> உறுப்புகளும் மைய-சீரமைக்கப்பட்டு, சிவப்பு உரை நிறத்துடன் இருக்கும்:

p {
  text-align: center;
  color: red;
}

CSS id தேர்வி

id தேர்வி ஒரு குறிப்பிட்ட உறுப்பைத் தேர்ந்தெடுக்க HTML உறுப்பின் id அட்ரிபியூட்டைப் பயன்படுத்துகிறது.

ஒரு உறுப்பின் id ஒரு பக்கத்திற்குள் தனிப்பட்டது, எனவே id தேர்வி ஒரு தனிப்பட்ட உறுப்பைத் தேர்ந்தெடுக்கப் பயன்படுத்தப்படுகிறது!

குறிப்பிட்ட id உடன் ஒரு உறுப்பைத் தேர்ந்தெடுக்க, ஒரு ஹாஷ் (#) கேரக்டரை எழுதவும், அதைத் தொடர்ந்து உறுப்பின் id.

எடுத்துக்காட்டு

கீழே உள்ள CSS விதி id="para1" உடன் HTML உறுப்புக்குப் பொருந்தும்:

#para1 {
  text-align: center;
  color: red;
}

⚠️ குறிப்பு:

ஒரு id பெயர் எண்ணில் தொடங்க முடியாது!

CSS வகுப்பு தேர்வி

வகுப்பு தேர்வி குறிப்பிட்ட வகுப்பு அட்ரிபியூட்டுடன் HTML உறுப்புகளைத் தேர்ந்தெடுக்கிறது.

குறிப்பிட்ட வகுப்புடன் உறுப்புகளைத் தேர்ந்தெடுக்க, ஒரு பீரியட் (.) கேரக்டரை எழுதவும், அதைத் தொடர்ந்து வகுப்புப் பெயர்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் class="center" உடன் அனைத்து HTML உறுப்புகளும் சிவப்பு மற்றும் மைய-சீரமைக்கப்பட்டிருக்கும்:

.center {
  text-align: center;
  color: red;
}

குறிப்பிட்ட HTML உறுப்புகள் மட்டுமே ஒரு வகுப்பால் பாதிக்கப்பட வேண்டும் என்பதையும் நீங்கள் குறிப்பிடலாம்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் class="center" உடன் <p> உறுப்புகள் மட்டுமே சிவப்பு மற்றும் மைய-சீரமைக்கப்பட்டிருக்கும்:

p.center {
  text-align: center;
  color: red;
}

HTML உறுப்புகள் ஒன்றுக்கு மேற்பட்ட வகுப்புகளைக் குறிப்பிடலாம்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் <p> உறுப்பு class="center" மற்றும் class="large" படி ஸ்டைல் செய்யப்படும்:

<p class="center large">This paragraph refers to two classes.</p>

⚠️ குறிப்பு:

ஒரு வகுப்புப் பெயர் எண்ணில் தொடங்க முடியாது!

CSS உலகளாவிய தேர்வி

உலகளாவிய தேர்வி (*) பக்கத்தில் உள்ள அனைத்து HTML உறுப்புகளையும் தேர்ந்தெடுக்கிறது.

எடுத்துக்காட்டு

கீழே உள்ள CSS விதி பக்கத்தில் உள்ள ஒவ்வொரு HTML உறுப்பையும் பாதிக்கும்:

* {
  text-align: center;
  color: blue;
}

CSS குரூப்பிங் தேர்வி

குரூப்பிங் தேர்வி ஒரே ஸ்டைல் வரையறைகளைக் கொண்ட அனைத்து HTML உறுப்புகளையும் தேர்ந்தெடுக்கிறது.

பின்வரும் CSS குறியீட்டைப் பாருங்கள் (h1, h2, மற்றும் p உறுப்புகளுக்கு ஒரே ஸ்டைல் வரையறைகள் உள்ளன):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

குறியீட்டைக் குறைக்க, தேர்விகளைக் குழுவாக்குவது நல்லது.

தேர்விகளைக் குழுவாக்க, ஒவ்வொரு தேர்வியையும் கமாவால் பிரிக்கவும்.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டில் மேலே உள்ள குறியீட்டிலிருந்து தேர்விகளைக் குழுவாக்கியுள்ளோம்:

h1, h2, p {
  text-align: center;
  color: red;
}

CSS பயிற்சிகள்

❓ பயிற்சி:

குறிப்பிட்ட id உடன் ஒரு உறுப்பைத் தேர்ந்தெடுக்க எந்த CSS தேர்வி பயன்படுத்தப்படுகிறது?

*
✗ தவறு! * என்பது உலகளாவிய தேர்வி, அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
.
✗ தவறு! . என்பது வகுப்பு தேர்வி, வகுப்பின் அடிப்படையில் தேர்ந்தெடுக்கிறது
#
✓ சரி! # என்பது id தேர்வி, குறிப்பிட்ட id உடன் உறுப்புகளைத் தேர்ந்தெடுக்கிறது
%
✗ தவறு! % என்பது CSS இல் தேர்வியாகப் பயன்படுத்தப்படுவதில்லை

அனைத்து CSS எளிய தேர்விகள்

தேர்வி எடுத்துக்காட்டு எடுத்துக்காட்டு விளக்கம்
#id #firstname id="firstname" உடன் உறுப்பைத் தேர்ந்தெடுக்கிறது
.class .intro class="intro" உடன் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
* * அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது
element p அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது
element,element,.. div, p அனைத்து <div> உறுப்புகளையும் மற்றும் அனைத்து <p> உறுப்புகளையும் தேர்ந்தெடுக்கிறது