چگونه گستره وسیعی از انتخابگر های CSS را خلاصه تر بنویسیم؟

انتخابگر های شبه کلاس is و where

در این مقاله با :is() و :where() آشنا می شویم، به این نوع از انتخابگر ها شبه کلاس (Pseudo-classes) میگویند، احتمالاً با شبه کلاس hover یا active آشنایی دارید! و به کمک آنها می توانید یک لیست وسیع از انتخابگر ها را خلاصه تر بنویسید. برای مثال فرض کنید یک لیست وسیع از کلاس های CSS داریم که می خواهیم همه آنها به رنگ قرمز نمایش یابند اما فقط برای پاراگراف هایی که نشانگر موس روی آنها قرار میگیرد روش سخت آن است که تک تک کلاس ها را جداگانه تایپ کنید:

.className p:hover,
.secondClass p:hover,
.andMore p:hover {
    color: red;
}

اما به کمک is یا where می توانید به صورت زیر حالت بالا را خلاصه کنید:

:is(.className, .secondClass, .andMore) p:hover {
    color: red;
}
:where(.className, .secondClass, .andMore) p:hover {
    color: red;
}

یا برای تگ ها و سایر المان ها و غیره نیز به همان شکل کاربرد دارند:

:is(header, main, footer) p:hover {
  color: red;
}

پس تفاوت where و is در چیست؟

تفاوت چندانی خصوصاً در عملکرد میان آنها نیست تنها تفاوت ها در اولویت اجرایی آنهاست (Specificity) is تقریبا از بالا تر از باقی انتخابگر های css قرار دارد (حتی بالاتر از انتخابگر مستقیمی مثل .class اما where بدون اولویت است (Specificity برابر با صفر).

ویژگی بخشندگی انتخابگر

هردو شبه کلاس های is و where ویژگی بخشندگی (Forgiving Selector Parsing) دارند به این معنا که اگر یکی از انتخابگر های نوشته داخل پرانتز آنها اشتباه باشد یا توسط مرورگر پشتیبانی نشود کل کد خطا محسوب نخواهد شد بلکه فقط همان انتخابگرهای اشتباه نادیده گرفته می شوند.

:where(:correct, :unsupported :invalid) {
  /* some css properties */
}

is از شبه المان ها (pseudo-elements) پشتیبانی نمی کند

به کد اشتباه زیر توجه کنید:

:is(some-element::before, some-element::after) {
  display: block;
}

بهتر است در چنین مواردی از is استفاده نشود گرچه این موضوع ممکن است آینده حل شود برای مطالعه بیشتر به لینک های روبرو سر بزنید: https://drafts.csswg.org/selectors-4/#matches و https://stackoverflow.com/a/68401910

توجه کنید که نام دیگر :is() همان :matches() و در برخی مرورگر های قدیمی تر :any() می باشد البته :any() انتخابگر های پیچیده را پشتیبانی نمی کند و قبل از آن باید نام سازنده مرورگر مانند حالت زیر قید شود:

ماده ۳۲۵۳ کنسرسیوم وب

:-webkit-any(header, main, footer) p:hover {
  color: red;
}
:-moz-any(header, main, footer) p:hover {
  color: red;
}
:matches(header, main, footer) p:hover {
  color: red;
}