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

در این مقاله با :is() آشنا می شویم و آنکه چطور به کمک آن می توانید یک لیست وسیع از انتخابگر ها را خلاصه تر بنویسید. برای مثال فرض کنید یک لیست وسیع از کلاس های CSS داریم که می خواهم همه آنها به رنگ قرمز نمایش یابند اما فقط برای پاراگرافهایی که نشانگر موس روی آنها قرار می گیرد بدترین روش آن است که تک تک کلاس ها را جداگانه تایپ کنید:

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

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

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

یا برای تگ ها و سایر المان ها:

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

توجه کنید که نام دیگر :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;
}