اختبار الوحدة: الـ Cascade كما هو فعلًا

السؤال 1 من 5

@layer base, components;
@layer components {
  .btn { color: white; }
}
a { color: blue; }

<a class="btn" href="#">Buy tickets</a>

• white، لأن components هي آخر layer مُعلنة.
• blue، لأن الأنماط العادية خارج الـ layers تتغلّب على كل layer.
• white، لأن الـ class أدقّ تحديدًا من selector النوع.
• لون الروابط الافتراضي في المتصفّح، لأن القاعدتين تلغي إحداهما الأخرى.

السؤال 2 من 5

:where(.card) .title { color: green; }
.title { color: red; }

• red، لأن درجة الـ selectorين (0,1,0) والأحمر يأتي لاحقًا.
• green، لأنه أدقّ تحديدًا.
• green، لأن selectors العناصر الداخلية تتغلّب على الـ selectors المفردة.
• لا هذا ولا ذاك؛ :where() تجعل القاعدة الأولى غير صالحة.

السؤال 3 من 5

• أضف transition-behavior: allow-discrete ليُسمح للـ custom property بالدخول في transition.
• انقل --glow إلى :root لتُورَث.
• سجّل --glow بـ @property مع syntax: "<length>" وقيمة ابتدائية.
• أضف will-change: --glow.

السؤال 4 من 5

• .field:focus
• input:focus + .field
• .field > input:focus
• .field:has(input:focus)

السؤال 5 من 5

.session-card {
  /* ??? */ { border-color: red; }
}

• & .is-live
• .is-live
• &:is-live
• &.is-live