Jassif Team Institution

CSS Attribute Selectors

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

பண்பு தேர்வுகளின் வெவ்வேறு வகைகள் கீழே விவரிக்கப்பட்டுள்ளன.

CSS [attribute] Selector

[attribute] தேர்வான் ஒரு குறிப்பிட்ட பண்புடன் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

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

Example

a[target] {
  background-color: yellow;
}

CSS [attribute="value"] Selector

[attribute="value"] தேர்வான் ஒரு குறிப்பிட்ட மதிப்புடன் கூடிய குறிப்பிட்ட பண்புடன் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

பின்வரும் எடுத்துக்காட்டு target="_blank" பண்புடன் அனைத்து <a> உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

a[target="_blank"] {
  background-color: yellow;
}

CSS [attribute~="value"] Selector

[attribute~="value"] தேர்வான் ஒரு குறிப்பிட்ட சொல்லைக் கொண்ட பண்பு மதிப்புடன் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

பின்வரும் எடுத்துக்காட்டு "flower" என்பதைக் கொண்ட title பண்புடன் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

[title~="flower"] {
  border: 5px solid yellow;
}

CSS [attribute|="value"] Selector

[attribute|="value"] தேர்வான் குறிப்பிட்ட பண்புடன் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது, அதன் மதிப்பு சரியாக குறிப்பிட்ட மதிப்பாக இருக்கலாம், அல்லது குறிப்பிட்ட மதிப்புடன் தொடங்கி ஒரு hyphen (-) க்குப் பிறகு இருக்கலாம்.

Example

[class|="top"] {
  background: yellow;
}

CSS [attribute^="value"] Selector

[attribute^="value"] தேர்வான் குறிப்பிட்ட பண்புடன் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது, அதன் மதிப்பு ஒரு குறிப்பிட்ட மதிப்புடன் தொடங்குகிறது.

பின்வரும் எடுத்துக்காட்டு "top" உடன் தொடங்கும் class பண்பு மதிப்புடன் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

[class^="top"] {
  background: yellow;
}

CSS [attribute$="value"] Selector

[attribute$="value"] தேர்வான் அதன் பண்பு மதிப்பு ஒரு குறிப்பிட்ட மதிப்புடன் முடியும் உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

பின்வரும் எடுத்துக்காட்டு "test" உடன் முடியும் class பண்பு மதிப்புடன் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

[class$="test"] {
  background: yellow;
}

CSS [attribute*="value"] Selector

[attribute*="value"] தேர்வான் அதன் பண்பு மதிப்பு ஒரு குறிப்பிட்ட மதிப்பைக் கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

பின்வரும் எடுத்துக்காட்டு "te" ஐக் கொண்ட class பண்பு மதிப்புடன் அனைத்து உறுப்புகளையும் தேர்ந்தெடுக்கிறது:

Example

[class*="te"] {
  background: yellow;
}

Style Form Elements With Attribute Selectors

CSS பண்பு தேர்வுகள் உள்ளீடு வகையின் அடிப்படையில் படிவ உறுப்புகளைப் பாணியிட பயனுள்ளதாக இருக்கும்:

Example

input[type="text"] {
  width: 150px;
  padding: 6px;
  margin-bottom: 10px;
  background-color: pink;
}

input[type="button"] {
  width: 100px;
  padding: 6px;
  background-color: lightgreen;
}

Exercise

All CSS Attribute Selectors