تجميع بلا أولوية — where :where()

الصياغة

:where(header, nav, footer) a {
  color: gray;   /* أولوية = 0، سهلة التجاوز */
}

footer a { color: blue; }  /* تتغلّب عليها بمحدّد بسيط جدًا */

⚡ جرّب بنفسك

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

<style>
  :where(.card, .panel) p { color: #64748b; }
  .special p { color: #7c5cff; font-weight: bold; }
</style>
<div class="card special"><p>هذا النص بنفسجي رغم أن :where() جاءت أولًا — لأن أولويتها صفر.</p></div>

أهم القيم

💡 نصائح عملية

• اجعل أنماط الـ Reset والمكتبات الأساسية بداخل :where() ليسهل على مستهلكيها تخصيصها
• إن لم تتذكّر الفرق: :is() = أقوى وسيط، :where() = صفر دائمًا

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

• استخدامه ثم التفاجؤ بأن قاعدة أخرى بسيطة كسرَتها بسهولة — هذا هو الهدف منه، وليس خطأً
• الخلط بينه وبين :is() في مشروع فيه تعارضات أولوية غامضة

خصائص ذات صلة