:has() हा 'पॅरेंट सिलेक्टर' नाही. तो JavaScript काढून टाकतो.

तुमच्या कोडमध्ये classList.toggle शोधा.

तुम्हाला बहुधा एकाच प्रकारची अनेक उदाहरणे आढळतील. एखादा वापरकर्ता चेकबॉक्सवर क्लिक करतो किंवा एखाद्या फील्डवर लक्ष केंद्रित (focus) करतो. तुम्ही पॅरेंट एलिमेंटवर क्लास टॉगल करण्यासाठी JavaScript वापरता. यामुळे CSS ला पॅरेंटला स्टाईल करणे शक्य होते.

तुम्ही यातील बहुतेक कोड काढून टाकू शकता.

लोक :has() ला 'पॅरेंट सिलेक्टर' म्हणतात. हे लेबल चुकीचे आहे. :has() एका अटीची (condition) चाचणी करते. एखादी स्टाईल लागू करायची की नाही हे ठरवण्यासाठी ते एलिमेंटमधील घटक तपासते.

ते खालील गोष्टी तपासू शकते:

  • एखादा वंशज (descendant) एलिमेंट
  • एखादा विशिष्ट सिबलिंग (sibling)
  • आयटम्सची संख्या
  • एखाद्या एलिमेंटची अनुपस्थिती

येथे काही उदाहरणे आहेत:

• जर कार्डमध्ये इमेज असेल तर त्याला स्टाईल करा: .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 ची थेट (live) स्थिती वाचते.

पूर्वी, तुम्हाला संदेशवाह्याप्रमाणे (messenger) काम करण्यासाठी JavaScript ची गरज पडत असे. एखादा 'चाइल्ड' एलिमेंट त्याच्या 'अँसेस्टर' (ancestor) वर स्टाईल्स ट्रिगर करू शकत नसे. क्लास ट्रीमध्ये वरच्या दिशेला नेण्यासाठी तुम्हाला 'लिसनर' (listener) लिहावा लागायचा.

आता, तो संदेशवाहक निघून गेला आहे.

जर तुम्ही :has() वापरले, तर तुमच्या स्टाईल्स नेहमीच अचूक असतील. त्या पहिल्या रेंडरमध्येच (first render) काम करतात. वापरकर्ता ब्राउझरमध्ये मागे गेल्यावरही त्या काम करतात. स्टेट बदलणे आणि स्टाईल बदलणे यामध्ये कोणताही विलंब होत नाही.

याचा वापर करा:

  • फॉर्म व्हॅलिडेशन (Form validation)
  • लिस्ट मधील रिकाम्या स्थिती (Empty states)
  • टॉगल करण्यायोग्य पॅनल्स (Toggleable panels)

लक्षात ठेवा की :has() वापरण्याचा एक खर्च (cost) आहे. ब्राउझरला अंतर्गत सिलेक्टर वंशज (descendants) विरुद्ध तपासावा लागतो. व्हॅलिडेशन किंवा टॉगल्स सारख्या बहुतेक UI कामांसाठी, तुम्हाला यात कोणताही फरक जाणवणार नाही.

स्क्रोल पोझिशन किंवा हजारो 'होव्हर' (hover) स्टेट्स सारख्या वारंवार होणाऱ्या बदलांसाठी याचा वापर करणे टाळा.

केवळ चाइल्ड एलिमेंटमधून स्टाईल्स नियंत्रित करण्यासाठी क्लास टॉगल करणे थांबवा. त्याऐवजी :has() ती अट व्यक्त करू शकते का, हे तपासा. तुमचा CSS कोड कमी होईल आणि तुमचे JavaScript नाहीसे होईल.

:has() हे Chrome, Firefox, Safari, आणि Edge मध्ये काम करते.

स्रोत: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej