CSS Pseudo-classes

CSS பியூடோ-கிளாஸ்களைக் கற்றுக்கொள்ளுங்கள்

CSS Pseudo-classes

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

பியூடோ-கிளாஸ்களின் சில பொதுவான பயன்கள்:

Syntax

பியூடோ-கிளாஸ்கள் எப்போதும் ஒற்றை பெருங்குடல் (:) மூலம் குறிக்கப்படுகின்றன, அதைத் தொடர்ந்து பியூடோ-கிளாஸ் பெயர் வரும்:

selector:pseudo-class-name {
  CSS properties
}

இங்கே நாம் :hover பியூடோ-கிளாஸ் மற்றும் :focus பியூடோ-கிளாஸ் பயன்படுத்துகிறோம்:

Mouse Over Me

Pseudo-classes Used on Links

HTML இணைப்புகளுக்கு, பின்வரும் பியூடோ-கிளாஸ்களைப் பயன்படுத்துவது பொதுவானது:

Example

நிலையைப் பொறுத்து இணைப்புகளை வெவ்வேறு வண்ணங்களில் காட்டவும்:

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

⚠️ குறிப்பு:

a:hover CSS வரையறையில் a:link மற்றும் a:visited க்குப் பிறகு வர வேண்டும்! a:active CSS வரையறையில் a:hover க்குப் பிறகு வர வேண்டும்! பியூடோ-கிளாஸ் பெயர்கள் பெரிய/சிறிய எழுத்து உணர்திறன் அல்ல.

:hover on <div>

<div> உறுப்பில் :hover பியூடோ-கிளாஸ் பயன்படுத்துவதற்கான எடுத்துக்காட்டு இங்கே:

Example

div:hover {
  background-color: blue;
}
இந்த div மேல் சுட்டியை நகர்த்தவும்

:focus on <input>

ஒரு உள்ளீட்டுப் புலம் கவனத்தைப் பெறும் போது அதைப் பாணியிட :focus பியூடோ-கிளாஸ் பயன்படுத்துவதற்கான எடுத்துக்காட்டு இங்கே:

Example

input:focus {
  background-color: yellow;
}

Pseudo-classes and HTML Classes

பியூடோ-கிளாஸ்களை HTML வகுப்புகளுடன் எளிதாக இணைக்கலாம்:

Example

"highlight" வகுப்புடன் கூடிய <a> உறுப்புக்கு :hover பியூடோ-கிளாஸ் சேர்க்கவும்:

a.highlight:hover {
  color: #ff0000;
}

Simple Tooltip Hover

ஒரு <div> உறுப்பின் மேல் சுட்டியை நகர்த்தி <p> உறுப்பைக் காட்டவும் (கருவி குறிப்பு போன்றது):

Hover over me to show the <p> element.
இது ஒரு கருவி குறிப்பு!

Example

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

The CSS :first-child Pseudo-class

:first-child பியூடோ-கிளாஸ் மற்றொரு உறுப்பின் முதல் குழந்தையாக இருக்கும் ஒரு குறிப்பிட்ட உறுப்புடன் பொருந்துகிறது.

Style all first child <p> elements

பின்வரும் எடுத்துக்காட்டில், செலக்டர் எந்த உறுப்பின் முதல் குழந்தையாக இருக்கும் அனைத்து <p> உறுப்புகளுடன் பொருந்துகிறது:

p:first-child {
  color: blue;
}

இது முதல் குழந்தை பத்தி (நீல நிறம்).

இது இரண்டாவது பத்தி.

இது ஒரு div க்குள் முதல் குழந்தை பத்தி.

இது இரண்டாவது பத்தி.

Style the first <em> element in all <p> elements

p em:first-child {
  color: blue;
}

Style all <em> elements in all first child <p> elements

p:first-child em {
  color: blue;
}

The CSS :lang() Pseudo-class

:lang() பியூடோ-கிளாஸ் குறிப்பிட்ட மதிப்புடன் கூடிய lang பண்புக்கூறைக் கொண்ட உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுகிறது.

Example

lang="no" உடன் கூடிய <q> உறுப்புகளுக்கான மேற்கோள் குறிகளை வரையறுக்கவும்:

q:lang(no) {
  quotes: "~" "~";
}

Some text A quote in Norwegian Some text.

Some text A regular quote Some text.

Exercise

கீழே உள்ள பயிற்சியை முயற்சிக்கவும்:

❓ CSS பியூடோ-கிளாஸ் எதற்காகப் பயன்படுத்தப்படுகிறது?

ஒரு உறுப்பின் வண்ணத்தை வரையறுக்க
✗ தவறு! வண்ண வரையறை பியூடோ-கிளாஸின் ஒரு பகுதியாக மட்டுமே
உறுப்புகளின் உள்ளடக்கத்தின் அடிப்படையில் தேர்ந்தெடுக்க
✗ தவறு! உள்ளடக்க தேர்வுக்கு பியூடோ-எலிமென்ட்கள் பயன்படுத்தப்படுகின்றன
ஒரு உறுப்பின் சிறப்பு நிலையை வரையறுக்க
✓ சரி! பியூடோ-கிளாஸ்கள் உறுப்புகளின் சிறப்பு நிலைகளை (hover, focus, first-child, முதலியன) பாணியிட பயன்படுகின்றன
பதிலளிக்கும் வடிவமைப்புகளை உருவாக்க
✗ தவறு! பதிலளிக்கும் வடிவமைப்புக்கு மீடியா குவெரிகள் பயன்படுத்தப்படுகின்றன

CSS Pseudo-classes Reference

அனைத்து CSS பியூடோ-கிளாஸ்களின் முழுமையான பட்டியலுக்கு, எங்கள் CSS Pseudo-classes Reference ஐப் பார்வையிடவும்.

Interactive States

:hover, :active, :focus

Link States

:link, :visited

Structural

:first-child, :last-child, :nth-child()

Form States

:checked, :disabled, :valid, :invalid