:is()

تجميع المحدّدات — is :is()

:is() يختصر عدّة محدّدات متكرّرة بقائمة واحدة، ويأخذ في الأولوية قوّة أقوى وسيط بداخله.

بدل تكرار نفس النسل لعدّة آباء مختلفين (header a:hover، nav a:hover، footer a:hover…)، تكتبها مرّة واحدة: :is(header, nav, footer) a:hover. النتيجة كود أقصر وأسهل صيانة، خاصة في تصميمات فيها عناصر أب كثيرة تتشارك نفس التنسيق للأبناء.

النقطة التي تُنسى غالبًا: :is() ليس محايدًا في الأولوية (Specificity) — يأخذ أولوية أقوى وسيط داخل القائمة. فـ :is(#id, .class) تُحسب بقوة #id كاملة حتى لو كان العنصر الفعلي مطابقًا لـ .class فقط. وهو أيضًا «قائمة متسامحة»: لو كتبت بداخله محدّدًا غير مدعوم، يُتجاهَل هو فقط ولا تفشل القائمة كاملة كما يحدث بالفواصل العادية.

الصياغة

:is(header, nav, footer) a:hover {
  color: #7c5cff;
}

/* بدل: header a:hover, nav a:hover, footer a:hover */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  nav a, header a, footer a { color: gray; text-decoration: none; }
  :is(nav, header, footer) a:hover { color: #7c5cff; font-weight: bold; }
</style>
<header><a href="#">رابط الترويسة</a></header>
<nav><a href="#">رابط التنقّل</a></nav>
<p>مرّر الفأرة فوق الروابط — كلاهما يستخدم نفس القاعدة المختصرة.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
:is(a, b, c)	يطابق أي عنصر يوافق أحد المحدّدات بالقائمة
الأولوية	تساوي أقوى وسيط داخل القائمة، وليست صفرًا
قائمة متسامحة	محدّد غير مدعوم بداخلها يُتجاهَل بلا كسر الباقي

💡 نصائح عملية

استخدمه لاختصار محدّدات نسل متكرّرة لعدة آباء بنفس القاعدة
قارنه دومًا بـ :where() عند الحاجة لأولوية صفر بدل أقوى وسيط

⚠️ أخطاء شائعة

توقّع أولوية محايدة (صفر) من :is() — هذا سلوك :where() فقط
وضع عناصر زائفة (::before) داخل القائمة — غير مسموح، :is() يقبل محدّدات عادية فقط

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs