:has() என்பது ஒரு Parent Selector அல்ல. இது JavaScript-ஐ நீக்கிவிடும்.

உங்கள் குறியீட்டில் classList.toggle-ஐத் தேடுங்கள்.

ஒரே மாதிரியான பல முறைகளை நீங்கள் கண்டறியலாம். ஒரு பயனர் ஒரு checkbox-ஐ கிளிக் செய்யும்போதோ அல்லது ஒரு புலத்தில் (field) கவனம் செலுத்தும்போதோ (focus), ஒரு parent element-இல் உள்ள class-ஐ மாற்ற (toggle) நீங்கள் JavaScript-ஐப் பயன்படுத்துவீர்கள். இது CSS மூலம் அந்த parent element-ஐ வடிவமைக்க (style) அனுமதிக்கிறது.

இந்தக் குறியீட்டில் பெரும்பாலானவற்றை நீங்கள் நீக்கிவிடலாம்.

மக்கள் :has()-ஐ parent selector என்று அழைக்கிறார்கள். இந்தத் தொடர் தவறானது. :has() ஒரு நிபந்தனையைச் (condition) சோதிக்கிறது. ஒரு ஸ்டைல் (style) பொருந்துமா என்பதைத் தீர்மானிக்க, அது ஒரு element-இன் உள்ளடக்கத்தைப் பார்க்கிறது.

இது பின்வருவனவற்றைச் சோதிக்க முடியும்:

  • ஒரு வாரிசு element (descendant element)
  • ஒரு குறிப்பிட்ட உடன் பிறந்த element (specific sibling)
  • உருப்படிகளின் எண்ணிக்கை (count of items)
  • ஒரு element இல்லாத நிலை (absence of an element)

இதோ சில உதாரணங்கள்:

• ஒரு கார்டில் (card) படம் இருந்தால் அதை வடிவமைக்க: .card:has(img) { ... }

• ஒரு checkbox சரிபார்க்கப்பட்டால் (checked) ஒரு வரிசையை (row) வடிவமைக்க: .option-row:has(input:checked) { background: var(--selected-bg); }

• உருப்படிகளின் எண்ணிக்கையின் அடிப்படையில் ஒரு grid layout-ஐ மாற்ற: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

கடைசி உதாரணம் தூய CSS (pure CSS) மூலம் ஒரு layout-ஐ மாற்றுகிறது. இது DOM-இன் நேரடி நிலையை (live state) வாசிக்கிறது.

முன்பு, ஒரு தூதுவராகச் செயல்பட உங்களுக்கு JavaScript தேவைப்பட்டது. ஒரு child element, அதன் ancestor element-இல் உள்ள ஸ்டைல்களைத் தூண்ட (trigger) முடியாது. ஒரு class-ஐ மரத்தின் (tree) மேல்நோக்கி நகர்த்த நீங்கள் ஒரு listener-ஐ எழுத வேண்டியிருந்தது.

இப்போது, அந்தத் தூதுவர் மறைந்துவிட்டார்.

நீங்கள் :has()-ஐப் பயன்படுத்தினால், உங்கள் ஸ்டைல்கள் எப்போதும் சரியாக இருக்கும். அவை முதல் முறை திரையில் தோன்றும்போதே (first render) வேலை செய்யும். பயனர் உலாவியில் (browser) பின்னோக்கிச் செல்லும்போது கூட அவை வேலை செய்யும். நிலை மாற்றம் (state change) மற்றும் ஸ்டைல் மாற்றம் ஆகியவற்றிற்கு இடையே எந்தத் தாமதமும் இருக்காது.

இதைப் பயன்படுத்தலாம்:

  • Form validation
  • பட்டியல்களில் உள்ள காலியான நிலைகள் (Empty states in lists)
  • Toggle செய்யக்கூடிய பேனல்கள் (Toggleable panels)

:has()-க்கு ஒரு விலை உண்டு என்பதைக் கவனத்தில் கொள்ளவும். உலாவியானது (browser) உட்புறத் தேர்வியை (inner selector) அதன் வாரிசு உறுப்புகளுக்கு (descendants) எதிராகச் சோதிக்க வேண்டும். validation அல்லது toggles போன்ற பெரும்பாலான UI பணிகளுக்கு, நீங்கள் எந்த மாற்றத்தையும் உணர மாட்டீர்கள்.

scroll நிலைகள் அல்லது ஆயிரக்கணக்கான hover நிலைகள் போன்ற அடிக்கடி மாறும் விஷயங்களுக்கு இதைப் பயன்படுத்துவதைத் தவிர்க்கவும்.

ஒரு child element மூலம் ஸ்டைல்களைக் கட்டுப்படுத்த class-களை toggle செய்வதை நிறுத்துங்கள். அதற்குப் பதிலாக :has() அந்த நிபந்தனையை வெளிப்படுத்த முடியுமா என்று பாருங்கள். உங்கள் CSS சுருங்கும் மற்றும் உங்கள் JavaScript மறைந்துவிடும்.

:has() Chrome, Firefox, Safari மற்றும் Edge ஆகியவற்றில் வேலை செய்கிறது.

ஆதாரம்: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej