CSS Pseudo-classes Reference

CSS போலி வகுப்புகள் மற்றும் அவற்றின் பயன்பாடு

CSS போலி வகுப்புகள்

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

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

தொடரியல்

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

selector:pseudo-class-name {
    CSS properties
}

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

a:hover {
    color: red;
}

input:focus {
    border-color: blue;
}

p:first-child {
    font-weight: bold;
}

CSS போலி வகுப்புகள் அட்டவணை

கீழே உள்ள அட்டவணை CSS இல் உள்ள அனைத்து போலி வகுப்பு முக்கிய சொற்களை பட்டியலிடுகிறது:

போலி வகுப்பு எடுத்துக்காட்டுகள் எடுத்துக்காட்டு விளக்கம்
:active a:active செயலில் உள்ள இணைப்பை தேர்ந்தெடுக்கிறது
:any-link a:anylink
area:anylink		 href பண்பு உள்ள எந்த <a> அல்லது <area> உறுப்புகளையும் தேர்ந்தெடுக்கிறது
:auto-fill input:autofill அதன் மதிப்பு பிரௌசரால் தானாக நிரப்பப்பட்ட எந்த <input> உறுப்பையும் தேர்ந்தெடுக்கிறது
:checked input:checked
option:checked		 செக் செய்யப்பட்ட எந்த <input> அல்லது <option> உறுப்புக்கும் பொருந்துகிறது
:default input:default
button:default
option:default		 தொடர்புடைய உறுப்புகளின் குழுவில் இயல்புநிலையாக உள்ள படிவ உறுப்புகளை தேர்ந்தெடுக்கிறது
:defined :defined வரையறுக்கப்பட்ட எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது (நிலையான அல்லது தனிப்பயன் உறுப்புகள்)
:dir() :dir(ltr)
:dir(rtl)		 குறிப்பிட்ட உரை திசையுடன் எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது
:disabled :disabled
input:disabled
option:disabled		 முடக்கப்பட்ட எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது. பெரும்பாலும் படிவ உறுப்புகளுக்குப் பயன்படுத்தப்படுகிறது
:empty div:empty குழந்தைகள் இல்லாத எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது (உரை முனைகள் உட்பட)
:enabled :enabled
input:enabled		 இயக்கப்பட்ட எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது. பெரும்பாலும் படிவ உறுப்புகளுக்குப் பயன்படுத்தப்படுகிறது
:first @page :first அச்சிடப்பட்ட ஆவணத்தின் முதல் பக்கத்தை குறிக்கிறது (@page விதியுடன் பயன்படுத்தப்படுகிறது)
:first-child p:first-child
li:first-child		 அதன் பெற்றோரின் முதல் குழந்தையாக இருக்கும் உறுப்பை தேர்ந்தெடுக்கிறது (சகோதர உறுப்புகளின் குழுவில்)
:first-of-type p:first-of-type
li:first-of-type		 சகோதர உறுப்புகளின் குழுவில் அதன் வகையின் முதல் உறுப்பை தேர்ந்தெடுக்கிறது
:focus input:focus
select:focus		 கவனம் பெறும் உறுப்பை தேர்ந்தெடுக்கிறது. பெரும்பாலும் படிவ உறுப்புகளுக்குப் பயன்படுத்தப்படுகிறது
:focus-visible button:focus-visible கவனம் பெறும் உறுப்பை தேர்ந்தெடுக்கிறது (கீபோர்டு மட்டுமே கவனம் செலுத்த பயன்படுத்தப்படும் போது மட்டும் கவனம் பாணிகளைப் பயன்படுத்த, சுட்டி அல்ல)
:focus-within form:focus-within
label:focus-within		 உறுப்பு அல்லது அதன் வழித்தோன்றல்கள் ஏதேனும் கவனம் பெற்றால் ஒரு உறுப்புக்கு பொருந்துகிறது
:fullscreen :fullscreen தற்போது முழுத்திரை முறையில் உள்ள எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது
:has() h2:has(+p) உடனடியாக p உறுப்பைத் தொடர்ந்து வரும் h2 உறுப்புகளைத் தேர்ந்தெடுத்து, பாணியை h2 க்குப் பயன்படுத்துகிறது
:hover a:hover
p:hover		 சுட்டி மேல் இருக்கும்போது உறுப்பை தேர்ந்தெடுக்கிறது
:in-range input:in-range குறிப்பப்பட்ட வரம்பு வரம்பிற்குள் மதிப்பைக் கொண்ட எந்த <input> உறுப்பையும் தேர்ந்தெடுக்கவும்
:indeterminate input:indeterminate நிச்சயமற்ற நிலையில் உள்ள எந்த படிவ உறுப்பையும் தேர்ந்தெடுக்கிறது
:invalid input:invalid
fieldset:invalid		 செல்லாத படிவ உறுப்புகளை தேர்ந்தெடுக்கிறது
:is() :is(ul, ol) அனைத்து <ul> மற்றும் <ol>உறுப்புகளை தேர்ந்தெடுக்கிறது
:lang() p:lang(it) lang பண்பு "it" (இத்தாலியன்)க்கு சமமான எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:last-child li:last-child அதன் பெற்றோரின் கடைசி குழந்தையாக இருக்கும் எந்த <li> உறுப்பையும் தேர்ந்தெடுக்கிறது
:last-of-type p:last-of-type அதன் பெற்றோரின் கடைசி <p> உறுப்பாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:left @page :left அச்சிடப்பட்ட ஆவணத்தின் அனைத்து இடது கைப் பக்கங்களையும் குறிக்கிறது (@page விதியுடன் பயன்படுத்தப்படுகிறது)
:link a:link பார்வையிடப்படாத எந்த இணைப்பையும் தேர்ந்தெடுக்கிறது
:modal :modal மாடல் நிலையில் உள்ள உறுப்பை தேர்ந்தெடுக்கிறது
:not() :not(p) <p> உறுப்பு அல்லாத எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது
:nth-child() p:nth-child(2) அதன் பெற்றோரின் இரண்டாவது குழந்தையாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:nth-last-child() p:nth-last-child(2) முடிவில் இருந்து எண்ணும் போது அதன் பெற்றோரின் இரண்டாவது குழந்தையாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:nth-last-of-type() p:nth-last-of-type(2) முடிவில் இருந்து எண்ணும் போது அதன் பெற்றோரின் இரண்டாவது <p> உறுப்பாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:nth-of-type() p:nth-of-type(2) அதன் பெற்றோரின் இரண்டாவது <p> உறுப்பாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:only-child p:only-child அதன் பெற்றோரின் ஒரே குழந்தையாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:only-of-type p:only-of-type அதன் பெற்றோரின் ஒரே <p> உறுப்பாக இருக்கும் எந்த <p> உறுப்பையும் தேர்ந்தெடுக்கிறது
:optional input:optional
select:optional
textarea:optional		 "required" பண்பு இல்லாத எந்த <input>, <select> அல்லது <textarea> உறுப்புகளையும் தேர்ந்தெடுக்கிறது
:out-of-range input:out-of-range குறிப்பிட்ட வரம்பு வரம்பிற்கு வெளியே மதிப்பைக் கொண்ட எந்த <input> உறுப்பையும் தேர்ந்தெடுக்கவும்
:placeholder-shown input:placeholder-shown
textarea:placeholder-shown		 தற்போது placeholder உரையைக் காண்பிக்கும் எந்த <input> அல்லது <textarea> உறுப்பையும் தேர்ந்தெடுக்கவும்
:popover-open :popover-open காண்பிக்கும் பாப்ஓவர் நிலையில் உள்ள எந்த உறுப்பையும் தேர்ந்தெடுக்கிறது
:read-only input:read-only "readonly" பண்பு குறிப்பிடப்பட்ட உள்ளீடு உறுப்புகளை தேர்ந்தெடுக்கிறது
:read-write input:read-write திருத்தக்கூடிய உள்ளீடு உறுப்புகளை தேர்ந்தெடுக்கிறது
:required input:required "required" பண்பு உள்ள உள்ளீடு உறுப்புகளை தேர்ந்தெடுக்கிறது
:right @page :right அச்சிடப்பட்ட ஆவணத்தின் அனைத்து வலது கைப் பக்கங்களையும் குறிக்கிறது (@page விதியுடன் பயன்படுத்தப்படுகிறது)
:root :root ஆவணத்தின் ரூட் உறுப்பை தேர்ந்தெடுக்கிறது
:scope :scope தேர்ந்தெடுப்பாளர்கள் பொருந்தக்கூடிய ஒரு குறிப்பு புள்ளி அல்லது வரம்பாக இருக்கும் உறுப்புகளை தேர்ந்தெடுக்கிறது
:state() :state() குறிப்பிட்ட தனிப்பயன் நிலையைக் கொண்ட தனிப்பயன் உறுப்புகளை தேர்ந்தெடுக்கிறது
:target :target தற்போதைய செயலில் உள்ள இலக்கு உறுப்பை தேர்ந்தெடுக்கிறது
:user-invalid :user-invalid செல்லாத மதிப்பைக் கொண்ட எந்த படிவ உறுப்பையும் தேர்ந்தெடுக்கிறது (பயனர் அதனுடன் தொடர்பு கொண்ட பிறகு)
:user-valid :user-valid செல்லுபடியாகும் மதிப்பைக் கொண்ட எந்த படிவ உறுப்பையும் தேர்ந்தெடுக்கிறது (பயனர் அதனுடன் தொடர்பு கொண்ட பிறகு)
:valid input:valid செல்லுபடியாகும் மதிப்பைக் கொண்ட அனைத்து உள்ளீடு உறுப்புகளையும் தேர்ந்தெடுக்கிறது
:visited a:visited
area:visited		 அனைத்து பார்வையிடப்பட்ட இணைப்புகளையும் தேர்ந்தெடுக்கிறது
:where() :where(ol, ul) அனைத்து <ul> மற்றும் <ol>உறுப்புகளை தேர்ந்தெடுக்கிறது

CSS போலி வகுப்புகள் பயிற்சி

உங்கள் CSS போலி வகுப்புகள் அறிவை சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ பயனர் சுட்டியை ஒரு இணைப்பின் மேல் நகர்த்தும் போது அதைப் பாணியிட பயன்படுத்தப்படும் சரியான CSS போலி வகுப்பு எது?

a:active
✗ தவறு! :active என்பது இணைப்பு செயலில் இருக்கும் போது (கிளிக் செய்யப்படும் போது) பயன்படுகிறது
a:hover
✓ சரி! :hover என்பது பயனர் சுட்டியை உறுப்பின் மேல் நகர்த்தும் போது பயன்படுகிறது
a:focus
✗ தவறு! :focus என்பது உறுப்பு கவனம் பெறும் போது பயன்படுகிறது (Tab விசையைப் பயன்படுத்தி அல்லது கிளிக் செய்வதன் மூலம்)
a:visited
✗ தவறு! :visited என்பது பார்வையிடப்பட்ட இணைப்புகளுக்குப் பயன்படுகிறது