:has ایک ناقابل معافی سلیکٹر ہے۔

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

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

ملاحظہ کریں ::scoobydoo اس میں؟ یہ بالکل ناجائز ہے۔ ایک معاف کرنے والی سلیکٹر لسٹ اس بوگس سلیکٹر کو نظر انداز کر دیتی ہے اور باقی آئٹمز کا جائزہ لینے کے لیے آگے بڑھتی ہے گویا یہ اس طرح لکھا گیا ہے:

article:has(h2, ul) { }

:has() واقعی ایک معاف کرنے والا سلیکٹر تھا۔ 7 مئی 2022 کے پچھلے مسودے میں. لیکن یہ بدل گیا۔ ایک مسئلہ کی اطلاع کے بعد کہ معاف کرنے والی فطرت جب jQuery سے متصادم ہوتی ہے۔ :has() ایک پیچیدہ سلیکٹر پر مشتمل ہے (مثال کے طور پر header h2 + p)۔ W3C ایک قرارداد پر اترا۔ بنا :has() ایک "نا معاف کرنے والا" سلیکٹر صرف چند ہفتے پہلے.

تو، ہماری پچھلی مثال؟ پوری سلیکٹر لسٹ غلط ہے کیونکہ بوگس سلیکٹر غلط ہے۔ لیکن دوسرے دو معاف کرنے والے سلیکٹرز، :is() اور :where()، بغیر تبدیلی کے رہ گئے ہیں۔

اس کے لیے تھوڑا سا حل ہے۔ یاد رکھیں، :is() اور :where()معاف کرنے والے ہیں، چاہے :has() نہیں ہے. اس کا مطلب ہے کہ ہم ان سلیکٹرز میں سے کسی کو بھی اندر لے سکتے ہیں۔ :has() مزید معاف کرنے والا رویہ حاصل کرنے کے لیے:

article:has(:where(h2, ul, ::-scoobydoo)) { }

آپ کون سا استعمال کرتے ہیں اس کی وجہ سے فرق پڑ سکتا ہے۔ :is() اس کی فہرست میں سب سے مخصوص آئٹم کے ذریعہ طے کیا جاتا ہے۔ لہذا، اگر آپ کو کچھ کم مخصوص کرنے کی ضرورت ہے تو آپ اس تک پہنچنے کو بہتر کریں گے۔ :where() چونکہ یہ مخصوص سکور میں اضافہ نہیں کرتا ہے۔

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

ہم نے تازہ ترین معلومات کی عکاسی کرنے کے لیے اپنی چند پوسٹس کو اپ ڈیٹ کیا۔ میں جنگل میں بہت سے دوسرے لوگوں کو دیکھ رہا ہوں جن کو اپ ڈیٹ کرنے کی ضرورت ہے، لہذا ہر اس شخص کے لیے تھوڑا سا PSA جسے ایسا کرنے کی ضرورت ہے۔

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/has-is-an-unforgiving-selector/