సిఎస్ఎస్ ప్సూడో క్లాస్ రిఫరెన్స్ హాండ్బుక్

CSS ప్రత్యామ్నాయ క్లేసెస్

ప్రత్యామ్నాయ క్లేసెస్ వినియోగించబడినది ఎలిమెంట్ల ప్రత్యేక స్థితిని నిర్వచించడానికి.

ఉదాహరణకు ఇది ఉపయోగపడవచ్చు:

  • వినియోగదారి మౌస్ ను ఎలిమెంట్ పైన ఉంచినప్పుడు షైలీని సెట్ చేయుము
  • సందర్శించిన లేదా సందర్శించని లింకులకు వేరే షైలీని సెట్ చేయుము
  • ఎలిమెంట్ ఫోకస్ అయినప్పుడు షైలీని సెట్ చేయుము
  • వలిది/లేని/తప్పనిసరి/ఎంపికచేసిన ఫార్మ్ ఎలిమెంట్లకు షైలీని సెట్ చేయుము

ఈ పట్టిక సిఎస్ఎస్లో వివిధ ప్రత్యామ్నాయ క్లేసెస్లను ప్రదర్శిస్తుంది:

ప్రత్యామ్నాయ క్లేసెస్ ఉదాహరణ ఉదాహరణ వివరణ
:active a:active చేసిన లింకులను ఎంచుకొనుము.
:any-link a:anylink href అట్రిబ్యూట్ కలిగిన ఎల్లా <a> లేదా <area> ఎలిమెంట్లను ఎంచుకొనుము.
:auto-fill input:autofill బ్రాసర్ ద్వారా ఆటోమాటిక్గా పూరించబడిన ఎలిమెంట్లను ఎంచుకొనుము.
:checked option:checked ఎంచుకునబడిన లేదా ఎంపికచేసిన <input> లేదా <option> ఎలిమెంట్లను సరిపోలుతుంది.
:default input:default సంబంధిత ఎలిమెంట్లలో మూల ఫార్మ్ ఎలిమెంట్ను ఎంచుకొనుము.
:defined :defined ప్రమాణబద్ధమైన లేదా స్వంతమైన ఎలిమెంట్లను ఎంచుకొనుము.
:dir() :dir(rtl) ప్రస్తావించిన టెక్స్ట్ దిశను కలిగిన ఎలిమెంట్లను ఎంచుకొనుము.
:disabled option:disabled అన్ని నిలిచిపోయిన ఎలిమెంట్లను ఎంచుకొనుము. ఇది ఫార్మ్ ఎలిమెంట్లకు ఉపయోగపడుతుంది.
:empty div:empty ఎల్లా కుమార్తెలు లేని (టెక్స్ట్ నోడ్లను సహా) ఎలిమెంట్లను ఎంచుకొనుము.
:enabled input:enabled అన్ని చేతనమైన మెటాడాన్ని ఎంచుకోండి, ఇది ఫారమ్ మెటాడాలకు సాధారణం.
:first @page :first ప్రింట్ డాక్యుమెంట్ యొక్క మొదటి పేజీని ప్రస్తావిస్తుంది (@page పరిధిలో ఉంటుంది).
:first-child p:first-child ఒక స్టార్ట్రింగ్ స్ప్రింగ్ ప్రతిపాదనలో మొదటి కుమారుడు ఉన్న మెటాడాన్ని ఎంచుకోండి (స్టార్ట్రింగ్ స్ప్రింగ్ ప్రతిపాదనలో).
:first-of-type li:first-of-type ఒక స్టార్ట్రింగ్ స్ప్రింగ్ ప్రతిపాదనలో ప్రత్యేక రకమైన మెటాడాన్ని ఎంచుకోండి.
:focus select:focus ఫోకస్ పొందిన మెటాడాన్ని ఎంచుకోండి, ఇది ఫారమ్ మెటాడాలకు సాధారణం.
:focus-visible button:focus-visible ఫోకస్ పొందిన మెటాడాన్ని ఎంచుకోండి (మౌస్ బదులుగా కీబోర్డ్ ద్వారా ఫోకస్ పొందింది మాత్రమే అనువర్తిస్తుంది).
:focus-within form:focus-within మెటాడాన్ని లేదా దాని ఏ వంశానికి చెందిన మెటాడాన్ని ఎంచుకోండి ఇది ఫోకస్ పొందింది.
:fullscreen :fullscreen ఫుల్స్క్రీన్ మోడ్లో ఉన్న మెటాడాన్ని ఎంచుకోండి.
:has() h2:has(+p) <p> మెటాడానికి తరువాత ఉన్న <h2> మెటాడాన్ని ఎంచుకోండి మరియు <h2> పై స్టైల్స్ ప్రసారించండి.
:hover a:hover మౌస్ మోటిఫైడ్ మెటాడాన్ని ఎంచుకోండి.
:in-range input:in-range ప్రస్తావించిన పరిధిలో ఉన్న విలువను కలిగివున్న <input> మెటాడాన్ని ఎంచుకోండి.
:indeterminate input:indeterminate అనిశ్చిత స్థితిలో ఉన్న ఫారమ్ మెటాడాన్ని ఎంచుకోండి.
:invalid input: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> మెటాడాన్ని ఎంచుకోండి.
: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) తన పేర్వ్ ఎల్ యొక్క రెండవ పిల్లి ప్రకారం ప్రస్తుతం ఎంచుకొనుము.
:nth-last-of-type() p:nth-last-of-type(2) తన పేర్వ్ ఎల్ యొక్క రెండవ పిల్లి ప్రకారం ప్రస్తుతం ఎంచుకొనుము.
:nth-of-type() p:nth-of-type(2) తన పేర్వ్ ఎల్ యొక్క రెండవ పేర్వ్ ప్రకారం ప్రస్తుతం ఎంచుకొనుము.
:only-child p:only-child తన పేర్వ్ ఎల్ యొక్క ఏకైక పిల్లి ప్రకారం ప్రస్తుతం ఎంచుకొనుము.
:only-of-type p:only-of-type తన పేర్వ్ ఎల్ యొక్క ఏకైక పేర్వ్ ప్రకారం ప్రస్తుతం ఎంచుకొనుము.
:optional textarea:optional required అంశం లేని <input> లేదా <select> లేదా <textarea> ఇన్పుట్ని ఎంచుకొనుము.
:out-of-range input:out-of-range ప్రస్తుతం ప్రదర్శించే విలువ ప్రస్తుతం ప్రదర్శించే విలువ పరిధిని మించిన <input> ఇన్పుట్ని ఎంచుకొనుము.
:placeholder-shown input:placeholder-shown ప్రస్తుతం ప్లేస్ హోల్డర్ టెక్స్ట్ ప్రదర్శించే <input> లేదా <textarea> ఇన్పుట్ని ఎంచుకొనుము.
:popover-open :popover-open ప్రస్తుతం ప్రదర్శించే పోప్యూబర్ స్థితిలో ఉన్న ఇన్పుట్ని ఎంచుకొనుము.
:read-only input:read-only readonly అంశం కలిగిన ఇన్పుట్ లను ఎంచుకొనుము.
:read-write input:read-write సరిహద్దు కలిగిన ఇన్పుట్ లను ఎంచుకొనుము.
:required input:required required అంశం కలిగిన ఇన్పుట్ లను ఎంచుకొనుము.
:right @page :right డాక్యుమెంట్ యొక్క అన్ని కుడి పేజీలను ముద్రించుట (పేజీ రూల్స్ తో కలిసి ఉపయోగించుము).
:root :root డాక్యుమెంట్ యొక్క పునఃప్రారంభ ఇన్పుట్ని ఎంచుకొనుము.
:scope :scope ఎంపికదారి లేదా పరిధిని సూచించే ఇన్పుట్ని ఎంచుకొనుము.
:state() :state() ప్రస్తుతం ప్రత్యేక అనుకూలమైన స్థితి కలిగిన కస్టమ్ ఇన్పుట్ని ఎంచుకొనుము.
:target :target ప్రస్తుతం చురుకున్న లక్ష్య ఇన్పుట్ని ఎంచుకొనుము.
:user-invalid :user-invalid వినియోగదారుని సహకారం తర్వాత అసమర్థమైన ఫారమ్ ఇన్పుట్లను ఎంచుకొనుము.
:user-valid :user-valid వినియోగదారుని సహకారం తర్వాత విజయవంతమైన ఫారమ్ ఇన్పుట్లను ఎంచుకొనుము.
:valid input:valid అన్ని విజయవంతమైన వినియోగదారు ఇన్పుట్ లను ఎంచుకొనుము.
:visited a:visited 选择所有已访问的链接。
:where() :where(ol, ul) అన్ని <ul> మరియు <ol> ఎలిమెంట్స్ ని ఎంపిక చేయండి。