:has یک انتخابگر نابخشودنی است

اتفاق کوچکی در راه انتشار آن افتاد CSS :has() انتخابگر به ol' Almanac. من در ابتدا شرح داده بودم :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 و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/has-is-an-unforgiving-selector/