:has() کوئی پیرنٹ سلیکٹر نہیں ہے۔ یہ JavaScript کو ختم کر دیتا ہے۔

اپنے کوڈ میں classList.toggle تلاش کریں۔

آپ کو غالباً ایک ہی پیٹرن کی کئی مثالیں ملیں گی۔ ایک صارف چیک باکس پر کلک کرتا ہے یا کسی فیلڈ پر فوکس کرتا ہے۔ آپ پیرنٹ ایلیمنٹ پر کلاس کو ٹوگل کرنے کے لیے 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 state) کو پڑھتی ہے۔

پہلے، آپ کو ایک پیغام رساں (messenger) کے طور پر کام کرنے کے لیے JavaScript کی ضرورت ہوتی تھی۔ ایک چائلڈ ایلیمنٹ اپنے اینسسٹر (ancestor) پر اسٹائلز کو ٹرگر نہیں کر سکتا تھا۔ آپ کو کلاس کو ٹری میں اوپر لے جانے کے لیے ایک لسنر (listener) لکھنا پڑتا تھا۔

اب، پیغام رساں ختم ہو چکا ہے۔

اگر آپ :has() استعمال کرتے ہیں، تو آپ کے اسٹائلز ہمیشہ درست رہتے ہیں۔ وہ پہلے رینڈر (render) پر ہی کام کرتے ہیں۔ وہ اس وقت بھی کام کرتے ہیں جب صارف اپنے براؤزر میں پیچھے (back) جاتا ہے۔ اسٹیٹ کی تبدیلی اور اسٹائل کی تبدیلی کے درمیان کوئی تاخیر نہیں ہوتی۔

اسے ان کاموں کے لیے استعمال کریں:

  • فارم ویلیڈیشن (Form validation)
  • لسٹوں میں خالی اسٹیٹس (Empty states)
  • ٹوگل ہونے والے پینلز (Toggleable panels)

نوٹ کریں کہ :has() کی ایک قیمت (cost) ہے۔ براؤزر کو ڈیسینڈنٹ کے مقابلے میں اندرونی سلیکٹر کا جائزہ لینا پڑتا ہے۔ ویلیڈیشن یا ٹوگلز جیسے زیادہ تر UI کاموں کے لیے، آپ کو کوئی فرق محسوس نہیں ہوگا۔

اسے ہائی فریکوئنسی تبدیلیوں جیسے اسکرول پوزیشن یا ہزاروں ہوور (hover) اسٹیٹس کے لیے استعمال کرنے سے گریز کریں۔

صرف چائلڈ سے اسٹائلز چلانے کے لیے کلاسز کو ٹوگل کرنا بند کریں۔ اس کے بجائے یہ پوچھیں کہ کیا :has() اس شرط کا اظہار کر سکتا ہے۔ آپ کا CSS کم ہو جائے گا اور آپ کی JavaScript غائب ہو جائے گی۔

:has() کروم، فائر فاکس، سفاری اور ایج میں کام کرتا ہے۔

ماخذ: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej