ترفند CSS: استایل دادن به هم‌نیاهای قبل و بعد از عنصری که ماوس رویش است

تا حالا خواسته‌اید وقتی ماوس روی یک عنصر می‌رود، استایل هم‌نیاهای قبل و بعدش عوض شود؟ با جاوااسکریپت می‌شود، ولی با CSS خالص هم شدنی است.

فرض کنید عناصر زیر را داریم:

<div>
  <a>1</a><a>2</a><a>3</a><a>4</a><a>5</a>
</div>

و قاعده‌ی CSS این است:

a { color: #f55; }

حالا بخش جالبش. با انتخابگر :has() و ترکیب‌گر هم‌نیای عمومی ~ هم‌نیاهای قبلی را می‌گیرم (یعنی آن‌هایی که قبل از a:hover آمده‌اند) و با ~ a هم‌نیاهای بعدی را. پس وقتی ماوس روی هر کدام از <a>ها باشد، دقیقاً همان عناصری که می‌خواهیم استایل می‌گیرند.

a:has(~ a:hover),
a:hover ~ a {
  color: #000;
}