:has() అనేది పేరెంట్ సెలెక్టర్ కాదు. ఇది జావాస్క్రిప్ట్‌ను తొలగిస్తుంది.

మీ కోడ్‌లో classList.toggle కోసం వెతకండి.

మీరు బహుశా ఒకే రకమైన ప్యాటర్న్‌ను అనేక చోట్ల చూ thấy ఉంటారు. ఒక యూజర్ చెక్‌బాక్స్‌ను క్లిక్ చేసినప్పుడు లేదా ఒక ఫీల్డ్‌పై ఫోకస్ చేసినప్పుడు, మీరు పేరెంట్ ఎలిమెంట్‌పై క్లాస్‌ను టోగుల్ చేయడానికి జావాస్క్రిప్ట్‌ను ఉపయోగిస్తారు. ఇది CSS ద్వారా పేరెంట్‌ను స్టైల్ చేయడానికి వీలు కల్పిస్తుంది.

మీరు ఈ కోడ్‌లో ఎక్కువ భాగాన్ని తొలగించవచ్చు.

ప్రజలు :has()ని పేరెంట్ సెలెక్టర్ అని పిలుస్తారు. కానీ ఈ పేరు తప్పు. :has() ఒక కండిషన్‌ను పరీక్షిస్తుంది. ఒక స్టైల్ వర్తించాలా లేదా అని నిర్ణయించడానికి ఇది ఎలిమెంట్ యొక్క కంటెంట్‌ను పరిశీలిస్తుంది.

ఇది వీటిని తనిఖీ చేయగలదు:

  • ఒక డిసెండెంట్ ఎలిమెంట్ (descendant element)
  • ఒక నిర్దిష్ట సిబ్లింగ్ (specific sibling)
  • ఐటమ్స్ యొక్క సంఖ్య (count of items)
  • ఒక ఎలిమెంట్ లేకపోవడం (absence of an element)

ఇక్కడ కొన్ని ఉదాహరణలు ఉన్నాయి:

• ఒక కార్డ్‌లో ఇమేజ్ ఉంటే దాన్ని స్టైల్ చేయడానికి: .card:has(img) { ... }

• చెక్‌బాక్స్ చెక్ చేసినప్పుడు ఒక రో (row)ను స్టైల్ చేయడానికి: .option-row:has(input:checked) { background: var(--selected-bg); }

• ఐటమ్స్ సంఖ్య ఆధారంగా గ్రిడ్ లేఅవుట్‌ను మార్చడానికి: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

చివరి ఉదాహరణ ప్యూర్ CSS ఉపయోగించి లేఅవుట్‌ను మారుస్తుంది. ఇది DOM యొక్క లైవ్ స్టేట్‌ను చదువుతుంది.

గతంలో, ఒక మెసెంజర్‌లా పనిచేయడానికి మీకు జావాస్క్రిప్ట్ అవసరమయ్యేది. ఒక చైల్డ్ ఎలిమెంట్ తన ఆన్సెస్టర్ (ancestor) ఎలిమెంట్‌పై స్టైల్స్‌ను ట్రిగ్గర్ చేయలేకపోయేది. క్లాస్‌ను పైకి తరలించడానికి మీరు ఒక లిజనర్ (listener) రాయాల్సి వచ్చేది.

ఇప్పుడు, ఆ మెసెంజర్ అవసరం లేదు.

మీరు :has() ఉపయోగిస్తే, మీ స్టైల్స్ ఎల్లప్పుడూ సరిగ్గా ఉంటాయి. అవి మొదటి రెండర్ (render) లోనే పనిచేస్తాయి. యూజర్ బ్రౌజర్‌లో వెనక్కి వెళ్ళినప్పుడు కూడా అవి పనిచేస్తాయి. స్టేట్ మార్పుకు మరియు స్టైల్ మార్పుకు మధ్య ఎటువంటి ఆలస్యం ఉండదు.

దీనిని వీటి కోసం ఉపయోగించండి:

  • ఫారమ్ వాలిడేషన్ (Form validation)
  • లిస్ట్‌లలో ఎम्प्टీ స్టేట్స్ (Empty states in lists)
  • టోగుల్ చేయగల ప్యానెల్స్ (Toggleable panels)

:has()కి కొంత ఖర్చు (cost) ఉంటుందని గమనించండి. బ్రౌజర్ ఇన్నర్ సెలెక్టర్‌ను డిసెండెంట్స్‌తో పోల్చి అంచనా వేయాల్సి ఉంటుంది. వాలిడేషన్ లేదా టోగుల్స్ వంటి చాలా UI పనుల కోసం, మీరు ఎటువంటి తేడాను గమనించరు.

స్క్రోల్ పొజిషన్స్ లేదా వేల సంఖ్యలో ఉండే హోవర్ స్టేట్స్ వంటి అధిక ఫ్రీక్వెన్సీ మార్పుల కోసం దీనిని ఉపయోగించవద్దు.

కేవలం చైల్డ్ నుండి స్టైల్స్‌ను నియంత్రించడానికి క్లాస్‌లను టోగుల్ చేయడం ఆపండి. దానికి బదులుగా :has() ఆ కండిషన్‌ను తెలియజేయగలదా అని ఆలోచించండి. మీ CSS తగ్గుతుంది మరియు మీ జావాస్క్రిప్ట్ మాయమవుతుంది.

:has() అనేది Chrome, Firefox, Safari మరియు Edge లలో పనిచేస్తుంది.

మూలం: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej