یکراست میرم سر اصل مطلب. فرض کنید شما یک یا چند المنت پاراگراف ‍‍P دارید که در والد های مختلف مثل header, footer و aside هستن و میخواین فرضا وقتی hover شد یه اتفاقی بیوفته. کدی که براش مینویسید احتمالا به این کد خواهد بود:

header p:hover,
aside p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

با سلکتور(selector) به نام :is() که قبلا اسمش :any() بوده و تو مرورگرهای قدیمی تر اسمش :matches() هست، میتونید سلکتورهای بالا رو به این روش بنویسید:

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

جالب نیست؟ خیلی بهتر شد. موارد پیچیده تر هم هست که این سلکتور کارو خیلی آسون میکنه، این مثال رو ببینید:

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

معادلش با :is():

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

🤯😍

فقط باید تو مرورگرهای قدیمی مثل IE مراقب باشید چون ممکنه با اسم دیگه وجود داشته باشن یا کلا ساپورت نکنن.