CSS సెలెక్టర్లు చీట్‌షీట్ & వివరాలు

CSS సెలెక్టర్లు చీట్‌షీట్

ఇటీవల, నేను CSS సెలెక్టర్లలోకి ప్రవేశిస్తున్నాను.

తెలియని చిహ్నాలతో చాలా CSS సెలెక్టర్లు ఉన్నారు,>. , * + ~ [] మొదలైనవి, కాబట్టి CSS సెలెక్టర్లు ఎలా పని చేస్తారనే దానిపై నేను తరచుగా అయోమయంలో పడ్డాను. చివరికి, నేను వాటిని నా తలపై నిఠారుగా చేసి, నేను ఎలా అర్థం చేసుకున్నాను అని తిరిగి రూపొందించాను.

* వాస్తవానికి, పేపర్‌లను సేవ్ చేయడానికి మరియు భూమిని కాపాడటానికి నేను వాటిని ఒకే A4 పరిమాణ పేజీలో నిర్వహించాలని అనుకున్నాను, కాని నేను చేయలేకపోయాను, ఎందుకంటే నేను జోడించాలనుకున్న చాలా మంది సెలెక్టర్లు ఉన్నారు కాబట్టి నేను ఒకటి కంటే ఎక్కువ పేజీలకు వెళ్ళవలసి వచ్చింది . కవర్ పేజీలు మినహా ఇది మొత్తం నాలుగు A4 పేజీలు.

ఈ చీట్‌షీట్‌ను ప్రింట్ చేసి గోడపై అంటుకోండి. వాటిని చూస్తూ గుర్తుంచుకోకండి. ఈ ఇన్ఫోగ్రాఫిక్ సరైన CSS సెలెక్టర్లను త్వరగా కనుగొనడంలో మీకు సహాయపడుతుందని మరియు మీ సమయాన్ని ఆదా చేస్తుందని నేను ఆశిస్తున్నాను.

CSS సెలెక్టర్లు చీట్‌షీట్ర్యాన్ యు చే CSS సెలెక్టర్ల ఆట

CSS CSS సెలెక్టర్ల చీట్‌షీట్‌ను డౌన్‌లోడ్ చేయడానికి వెళ్లి ఆటను ఆస్వాదించండి🕹

కంగారుపడవద్దు. ఇవన్నీ ఉచితం.

CSS CSS సెలెక్టర్‌లోకి ప్రవేశించండి.

మీ కోసం విషయాలు సులభతరం చేయడానికి MDN నిర్వచనాలతో పాటు ఇన్ఫోగ్రాఫిక్‌ను జాబితా చేస్తాను.

టైప్ సెలెక్టర్

CSS రకం సెలెక్టర్ నోడ్ పేరు ద్వారా మూలకాలతో సరిపోతుంది. మరో మాటలో చెప్పాలంటే, ఇది పత్రంలో ఇచ్చిన రకం యొక్క అన్ని అంశాలను ఎంచుకుంటుంది. - ఎండిఎన్

టైప్ సెలెక్టర్

ID సెలెక్టర్

దాని ఐడి లక్షణం విలువ ఆధారంగా ఒక మూలకాన్ని ఎంచుకుంటుంది. పత్రంలో ఇచ్చిన ID తో ఒకే మూలకం ఉండాలి. - ఎండిఎన్

ID సెలెక్టర్

వారసుడు సెలెక్టర్

B కి సరిపోయే ఏదైనా మూలకం A కి సరిపోయే మూలకం యొక్క వారసుడు (అనగా, పిల్లవాడు లేదా పిల్లల బిడ్డ మొదలైనవి). కాంబినేటర్ ఒకటి లేదా అంతకంటే ఎక్కువ ఖాళీలు లేదా సంకేతాల కంటే ద్వంద్వ ఎక్కువ. - ఎండిఎన్

వారసుడు సెలెక్టర్

వారసుడు & ఐడి సెలెక్టర్లను కలపండి

వారసుడు & ఐడి సెలెక్టర్లను కలపండి

క్లాస్ సెలెక్టర్

CSS క్లాస్ సెలెక్టర్ వారి తరగతి లక్షణంలోని విషయాల ఆధారంగా మూలకాలతో సరిపోలుతుంది. - ఎండిఎన్

క్లాస్ సెలెక్టర్

క్లాస్ సెలెక్టర్‌ను కలపండి

క్లాస్ సెలెక్టర్‌ను కలపండి

కామా కాంబినేటర్

A మరియు / లేదా B. కి సరిపోయే ఏదైనా మూలకం - MDN

కామా కాంబినేటర్

యూనివర్సల్ సెలెక్టర్

ప్రతిదీ ఎంచుకోండి!

యూనివర్సల్ సెలెక్టర్

యూనివర్సల్ సెలెక్టర్‌ను కలపండి

యూనివర్సల్ సెలెక్టర్‌ను కలపండి

ప్రక్కనే ఉన్న తోబుట్టువుల సెలెక్టర్

ప్రక్కనే ఉన్న తోబుట్టువుల కాంబినేటర్ (+) ఇద్దరు సెలెక్టర్లను వేరు చేస్తుంది మరియు రెండవ మూలకానికి మొదటి మూలకాన్ని వెంటనే అనుసరిస్తేనే సరిపోతుంది, మరియు ఇద్దరూ ఒకే మాతృ మూలకం యొక్క పిల్లలు. - ఎండిఎన్

ప్రక్కనే ఉన్న తోబుట్టువుల సెలెక్టర్

జనరల్ తోబుట్టువుల సెలెక్టర్

సాధారణ తోబుట్టువుల కాంబినేటర్ (~) ఇద్దరు సెలెక్టర్లను వేరు చేస్తుంది మరియు రెండవ మూలకాన్ని మొదటి మూలకాన్ని అనుసరిస్తేనే సరిపోతుంది (వెంటనే అవసరం లేదు), మరియు ఇద్దరూ ఒకే మాతృ మూలకం యొక్క పిల్లలు. - ఎండిఎన్

జనరల్ తోబుట్టువుల సెలెక్టర్

చైల్డ్ సెలెక్టర్

చైల్డ్ కాంబినేటర్ (>) ఇద్దరు CSS సెలెక్టర్ల మధ్య ఉంచబడుతుంది. ఇది రెండవ సెలెక్టర్తో సరిపోలిన అంశాలతో మాత్రమే సరిపోతుంది, అవి మొదటిదానితో సరిపోలిన మూలకాల పిల్లలు. - ఎండిఎన్

చైల్డ్ సెలెక్టర్

మొదటి చైల్డ్ సూడో-సెలెక్టర్

: మొదటి-బిడ్డ CSS సూడో-క్లాస్ తోబుట్టువుల మూలకాల సమూహంలో మొదటి మూలకాన్ని సూచిస్తుంది. - ఎండిఎన్

మొదటి చైల్డ్ సూడో-సెలెక్టర్

చైల్డ్ సూడో-సెలెక్టర్ మాత్రమే

: ఒకే-పిల్లవాడు CSS సూడో-క్లాస్ ఏ తోబుట్టువులు లేకుండా ఒక మూలకాన్ని సూచిస్తుంది. ఇది అదే: మొదటి-బిడ్డ: చివరి-బిడ్డ లేదా: nth- చైల్డ్ (1): nth-last-child (1), కానీ తక్కువ విశిష్టతతో. - ఎండిఎన్

చైల్డ్ సూడో-సెలెక్టర్ మాత్రమే

చివరి చైల్డ్ సూడో-సెలెక్టర్

: చివరి-పిల్లల CSS సూడో-క్లాస్ తోబుట్టువుల మూలకాల సమూహంలో చివరి మూలకాన్ని సూచిస్తుంది. - ఎండిఎన్

చివరి చైల్డ్ సూడో-సెలెక్టర్

N వ చైల్డ్ సూడో-సెలెక్టర్

: Nth- చైల్డ్ () CSS సూడో-క్లాస్ తోబుట్టువుల సమూహంలో వారి స్థానం ఆధారంగా మూలకాలతో సరిపోతుంది. - ఎండిఎన్

N వ చైల్డ్ సూడో-సెలెక్టర్

Nth చివరి చైల్డ్ సెలెక్టర్

: Nth-last-child () CSS సూడో-క్లాస్ తోబుట్టువుల సమూహంలో వారి స్థానం ఆధారంగా అంశాలతో సరిపోతుంది, చివరి నుండి లెక్కిస్తుంది. - ఎండిఎన్

Nth చివరి చైల్డ్ సెలెక్టర్

టైప్ సెలెక్టర్ యొక్క మొదటిది

: ఫస్ట్-ఆఫ్-టైప్ CSS సూడో-క్లాస్ దాని రకం యొక్క మొదటి మూలకాన్ని తోబుట్టువుల మూలకాల సమూహంలో సూచిస్తుంది. - ఎండిఎన్

టైప్ సెలెక్టర్ యొక్క మొదటిది

టైప్ సెలెక్టర్ యొక్క N వ

: Nth-of-type () CSS సూడో-క్లాస్ ఇచ్చిన రకం యొక్క అంశాలతో సరిపోతుంది, తోబుట్టువుల సమూహంలో వారి స్థానం ఆధారంగా. - ఎండిఎన్

టైప్ సెలెక్టర్ యొక్క N వ

ఫార్ములాతో Nth-of-type సెలెక్టర్

Nth-of-type సెలెక్టర్
 గమనిక:
: N వ-యొక్క-రకం (కూడా)
: N వ-యొక్క-రకం (బేసి)
: N వ-యొక్క-రకం (2)
: N వ-యొక్క-రకం (2n)
: N వ-యొక్క-రకం (3N-1)
: N వ-యొక్క-రకం (2n + 2)

టైప్ సెలెక్టర్ మాత్రమే

: ఒకే రకమైన CSS సూడో-క్లాస్ ఒకే రకమైన తోబుట్టువులు లేని మూలకాన్ని సూచిస్తుంది. - ఎండిఎన్

టైప్ సెలెక్టర్ మాత్రమే

టైప్ సెలెక్టర్ చివరిది

: చివరి-రకం CSS సూడో-క్లాస్ తోబుట్టువుల మూలకాల సమూహంలో దాని రకం యొక్క చివరి మూలకాన్ని సూచిస్తుంది. - ఎండిఎన్

టైప్ సెలెక్టర్ చివరిది

ఖాళీ సెలెక్టర్

: ఖాళీ CSS నకిలీ తరగతి పిల్లలు లేని ఏ మూలకాన్ని సూచిస్తుంది. పిల్లలు ఎలిమెంట్ నోడ్స్ లేదా టెక్స్ట్ (వైట్‌స్పేస్‌తో సహా) కావచ్చు. వ్యాఖ్యలు, ప్రాసెసింగ్ సూచనలు మరియు CSS కంటెంట్ ఒక మూలకం ఖాళీగా పరిగణించబడుతుందో లేదో ప్రభావితం చేయదు. - ఎండిఎన్

ఖాళీ సెలెక్టర్

నెగెషన్ సూడో-క్లాస్

: కాదు () CSS సూడో-క్లాస్ సెలెక్టర్ల జాబితాతో సరిపోలని అంశాలను సూచిస్తుంది. ఇది నిర్దిష్ట వస్తువులను ఎన్నుకోకుండా నిరోధిస్తుంది కాబట్టి, దీనిని నెగెషన్ సూడో-క్లాస్ అంటారు. - ఎండిఎన్

నెగెషన్ సూడో-క్లాస్

లక్షణం సెలెక్టర్

లక్షణం సెలెక్టర్లు ఒక ప్రత్యేకమైన సెలెక్టర్, ఇవి వాటి గుణాలు మరియు లక్షణ విలువల ఆధారంగా మూలకాలతో సరిపోలుతాయి. వారి సాధారణ వాక్యనిర్మాణం చదరపు బ్రాకెట్లను కలిగి ఉంటుంది ([]) లక్షణం పేరును కలిగి ఉంటుంది, తరువాత లక్షణం యొక్క విలువతో సరిపోలడానికి ఐచ్ఛిక షరతు ఉంటుంది. లక్షణం విలువలను సరిపోయే విధానాన్ని బట్టి లక్షణాల సెలెక్టర్లను రెండు వర్గాలుగా విభజించవచ్చు: ఉనికి మరియు విలువ లక్షణ ఎంపికదారులు మరియు సబ్‌స్ట్రింగ్ విలువ లక్షణ ఎంపికదారులు. - ఎండిఎన్

లక్షణం సెలెక్టర్

లక్షణం విలువ సెలెక్టర్

లక్షణం విలువ సెలెక్టర్

లక్షణం సెలెక్టర్‌తో మొదలవుతుంది

ఈ సెలెక్టర్ విలువ విలువతో మొదలయ్యే గుణం attr తో అన్ని అంశాలను ఎన్నుకుంటుంది. - ఎండిఎన్

లక్షణం సెలెక్టర్‌తో మొదలవుతుంది

లక్షణం సెలెక్టర్‌తో ముగుస్తుంది

ఈ సెలెక్టర్ లక్షణం attr తో అన్ని అంశాలను ఎన్నుకుంటుంది, దీని కోసం విలువ విలువతో ముగుస్తుంది. - ఎండిఎన్

లక్షణం సెలెక్టర్‌తో ముగుస్తుంది

వైల్డ్‌కార్డ్ సెలెక్టర్ లక్షణం

ఈ సెలెక్టర్ లక్షణం attr తో అన్ని అంశాలను ఎన్నుకుంటుంది, దీని కోసం విలువ సబ్‌స్ట్రింగ్ విలువను కలిగి ఉంటుంది. (ఒక సబ్‌స్ట్రింగ్ కేవలం స్ట్రింగ్‌లో భాగం, ఉదా. "పిల్లి" అనేది "గొంగళి పురుగు" అనే స్ట్రింగ్‌లోని సబ్‌స్ట్రింగ్.) - MDN

వైల్డ్‌కార్డ్ సెలెక్టర్ లక్షణం

అభినందనలు, మీరు పూర్తి చేసారు

వ్యాసాలు

🕹 కోడ్‌పెన్

Questions ఏదైనా ప్రశ్నలు లేదా అభిప్రాయం

నేను మీ కోసం ఎలా మెరుగుపరుస్తాను అనే దానిపై మీ అభిప్రాయాన్ని వినడానికి నేను ఇష్టపడతాను. దయచేసి మీ వ్యాఖ్యలను క్రింద లేదా నా ట్విట్టర్ ద్వారా ఉంచండి.

CS CSS సెలెక్టర్ల ఆట చేయడానికి నాకు సహాయం చేసినందుకు ర్యాన్ యుకు పెద్ద ధన్యవాదాలు. ర్యాన్ యు <ఫ్రంట్ఎండ్ 30 /> రచయిత, ఇక్కడ నేను చాలా కూల్ ఫ్రంట్ ఎండ్ టెక్నిక్స్ నేర్చుకున్నాను.

Today హ్యాపీ కోడ్‌సైన్ ఈ రోజు