CSS போலி உறுப்புகள்
ஒரு CSS போலி உறுப்பு ஒரு உறுப்பின் குறிப்பிட்ட பகுதிகளை பாணியிட பயன்படுகிறது.
எடுத்துக்காட்டாக, இது பயன்படுத்தப்படலாம்:
- ஒரு உறுப்பின் முதல் எழுத்து அல்லது வரியை பாணியிட
- ஒரு உறுப்புக்கு முன் அல்லது பின் உள்ளடக்கத்தைச் செருக
- பட்டியல் உருப்படிகளின் குறிப்பான்களை பாணியிட
- ஒரு உரையாடல் பெட்டிக்கு பின்னால் உள்ள காட்சிப்பெட்டியை பாணியிட
CSS போலி உறுப்புகள் அட்டவணை
கீழே உள்ள அட்டவணை CSS இல் உள்ள வெவ்வேறு போலி உறுப்புகளைக் காட்டுகிறது:
| போலி உறுப்பு | எடுத்துக்காட்டு | எடுத்துக்காட்டு விளக்கம் |
|---|---|---|
| ::after | p::after div::after |
குறிப்பிட்ட உறுப்பின் உள்ளடக்கத்திற்குப் பின் ஏதாவது ஒன்றைச் செருகுகிறது |
| ::backdrop | dialog::backdrop | ஒரு உரையாடல் பெட்டி அல்லது பாப்ஓவர் உறுப்புக்கு பின்னால் உள்ள காட்சிப்பெட்டியை பாணியிடுகிறது |
| ::before | p::before div::before |
குறிப்பிட்ட உறுப்பின் உள்ளடக்கத்திற்கு முன் ஏதாவது ஒன்றைச் செருகுகிறது |
| ::file-selector-button | ::file-selector-button | <input type="file"> வகையின் எந்த பொத்தானையும் தேர்ந்தெடுக்கிறது |
| ::first-letter | p::first-letter | ஒவ்வொரு <p> உறுப்பின் முதல் எழுத்தையும் தேர்ந்தெடுக்கிறது |
| ::first-line | p::first-line | ஒவ்வொரு <p> உறுப்பின் முதல் வரியையும் தேர்ந்தெடுக்கிறது |
| ::grammar-error | ::grammar-error | பிரௌசர் இலக்கணரீதியாக தவறானதாகக் குறிப்பிட்ட உரையை பாணியிடுகிறது |
| ::highlight() | ::highlight(custom-name) | ஒரு தனிப்பயன் முன்னிலைப்படுத்தலைத் தேர்ந்தெடுக்கிறது |
| ::marker | ::marker | பட்டியல் உருப்படிகளின் குறிப்பான்களைத் தேர்ந்தெடுக்கிறது |
| ::placeholder | input::placeholder textarea::placeholder |
<input> அல்லது <textarea> உறுப்புகளின் placeholder உரையை பாணியிடுகிறது |
| ::selection | ::selection | பயனர் தேர்ந்தெடுத்த உரையை பாணியிடுகிறது |
| ::spelling-error | ::spelling-error | பிரௌசர் தவறாக எழுதப்பட்டதாகக் குறிப்பிட்ட உரையை பாணியிடுகிறது |
| ::view-transition | ::view-transition | பக்கத்தில் உள்ள அனைத்து காட்சி மாற்றங்களையும் கொண்ட காட்சி மாற்றங்கள் மேலோட்டத்தின் ரூட்டைக் குறிக்கிறது |
| ::view-transition-group | ::view-transition-group | ஒரு ஒற்றை காட்சி மாற்றம் ஸ்னாப்ஷாட் குழுவைக் குறிக்கிறது |
| ::view-transition-image-pair | ::view-transition-image-pair | ஒரு காட்சி மாற்றத்தின் "பழைய" மற்றும் "புதிய" காட்சி நிலைகளுக்கான கொள்கலனைக் குறிக்கிறது - மாற்றத்திற்கு முன்னும் பின்னும் |
| ::view-transition-new | ::view-transition-new | ஒரு காட்சி மாற்றத்தின் "புதிய" காட்சி நிலையைக் குறிக்கிறது |
| ::view-transition-old | ::view-transition-old | ஒரு காட்சி மாற்றத்தின் "பழைய" காட்சி நிலையைக் குறிக்கிறது |
CSS போலி உறுப்புகள் பயிற்சி
உங்கள் CSS போலி உறுப்புகள் அறிவை சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.