CSS Pseudo-elements

CSS பியூடோ-எலிமென்ட்களைக் கற்றுக்கொள்ளுங்கள்

CSS Pseudo-elements

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

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

Syntax

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

selector::pseudo-element-name {
  CSS properties
}

The CSS ::first-line Pseudo-element

::first-line பியூடோ-எலிமென்ட் ஒரு உரையின் முதல் வரிக்கு சிறப்பு பாணியைச் சேர்க்கப் பயன்படுகிறது.

குறிப்பு: ::first-line பியூடோ-எலிமென்ட் தொகுதி-நிலை உறுப்புகளுக்கு மட்டுமே பயன்படுத்தப்பட முடியும்.

Example

அனைத்து <p> உறுப்புகளிலும் உரையின் முதல் வரியை வடிவமைக்கவும்:

p::first-line {
  color: red;
  font-variant: small-caps;
  font-size: 19px;
}

The CSS ::first-letter Pseudo-element

::first-letter பியூடோ-எலிமென்ட் ஒரு உரையின் முதல் எழுத்துக்கு சிறப்பு பாணியைச் சேர்க்கப் பயன்படுகிறது.

குறிப்பு: ::first-letter பியூடோ-எலிமென்ட் தொகுதி-நிலை உறுப்புகளுக்கு மட்டுமே பயன்படுத்தப்பட முடியும்.

Example

அனைத்து <p> உறுப்புகளிலும் உரையின் முதல் எழுத்தை வடிவமைக்கவும்:

p::first-letter {
  color: red;
  font-size: xx-large;
}

The CSS ::before Pseudo-element

::before பியூடோ-எலிமென்ட் ஒரு குறிப்பிட்ட உறுப்பின் உள்ளடக்கத்திற்கு முன் சில உள்ளடக்கங்களைச் செருகப் பயன்படுகிறது.

செருக வேண்டிய உள்ளடக்கத்தைக் குறிப்பிட content பண்பைப் பயன்படுத்தவும்.

Example

ஒவ்வொரு <h3> உறுப்பின் உள்ளடக்கத்திற்கு முன் ஒரு படத்தைச் செருகவும்:

h3::before {
  content: url(smiley.gif);
}

The CSS ::after Pseudo-element

::after பியூடோ-எலிமென்ட் ஒரு குறிப்பிட்ட உறுப்பின் உள்ளடக்கத்திற்குப் பிறகு சில உள்ளடக்கங்களைச் செருகப் பயன்படுகிறது.

செருக வேண்டிய உள்ளடக்கத்தைக் குறிப்பிட content பண்பைப் பயன்படுத்தவும்.

Example

ஒவ்வொரு <h3> உறுப்பின் உள்ளடக்கத்திற்குப் பிறகு ஒரு படத்தைச் செருகவும்:

h3::after {
  content: url(smiley.gif);
}

The CSS ::marker Pseudo-element

::marker பியூடோ-எலிமென்ட் பட்டியல் உருப்படி குறிப்பான்களைப் பாணியிட பயன்படுகிறது.

Example

பட்டியல் உருப்படிகளின் குறிப்பான்களைப் பாணியிடவும்:

::marker {
  color: red;
  font-size: 23px;
}

The CSS ::selection Pseudo-element

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

Example

பயனர் தேர்ந்தெடுத்த உரையை சிவப்பு நிறத்திலும் மஞ்சள் பின்னணியிலும் பாணியிடவும்:

::selection {
  color: red;
  background: yellow;
}

The CSS ::backdrop Pseudo-element

::backdrop பியூடோ-எலிமென்ட் ஒரு உரையாடல் பெட்டி அல்லது பாப்ஓவர் உறுப்புக்குப் பின்னால் உள்ள பார்வைப்பெட்டியைப் பாணியிட பயன்படுகிறது.

Example

உரையாடல் பெட்டிக்குப் பின்னால் உள்ள பார்வைப்பெட்டியைப் பாணியிடவும்:

dialog::backdrop {
  background-color: lightgreen;
}

Pseudo-elements and HTML Classes

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

Example

class="intro" உடன் கூடிய <p> உறுப்புகளின் முதல் எழுத்தை சிவப்பு நிறத்திலும் பெரிய அளவிலும் காட்டவும்:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Multiple Pseudo-elements

பல பியூடோ-எலிமென்ட்களையும் இணைக்கலாம்.

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

Example

p::first-letter {
  color: red;
  font-size: xx-large;
}

p::first-line {
  color: blue;
  font-variant: small-caps;
}

Exercise

❓ ஒரு <h1> உறுப்பின் உரைக்கு முன் உள்ளடக்கத்தைச் செருக சரியான பியூடோ-எலிமென்டை இழுத்து விடவும்.

before
✗ தவறு!
after
✗ தவறு!
first-line
✗ தவறு!
::before
✓ சரி! ::before பியூடோ-எலிமென்ட் ஒரு உறுப்புக்கு முன் உள்ளடக்கத்தைச் செருகுகிறது

CSS Pseudo-elements Reference

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