& (Nesting)

التداخل الأصلي & (Nesting)

CSS يدعم الآن تداخل القواعد ببعضها مباشرة في المتصفح، بلا معالج مثل SASS — مع محدّد & للحالات الخاصة.

أصبح بإمكانك كتابة .card { h2 { font-size: 20px; } } مباشرة، ويعمل في المتصفح بلا أي أداة بناء أو حزمة npm — على عكس SASS الذي يحتاج ترجمة مسبقة. لمحدّد نسل بسيط (وسم أو صنف يبدأ القاعدة المتداخلة) لا حاجة لأي رمز خاص.

محدّد & مطلوب في حالتين فقط: عندما تُلحِق شيئًا بنفس العنصر الأب مباشرة بلا مسافة (&:hover، &.featured، &::before)، أو عندما يأتي الأب في غير أول الجملة مثل .dark & { color: white; } (أي: هذا العنصر داخل .dark). هذا السلوك «المُرخّى» — حيث لا حاجة لـ& مع النسل البسيط — استقر عبر المتصفحات الرئيسية أواخر 2023، بعد أن كانت الإصدارات الأولى تتطلّب & دائمًا.

الصياغة

.card {
  padding: 16px;

  h2 { font-size: 1.25rem; }   /* بلا & */

  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
  &.featured { border: 2px solid #7c5cff; }

  .dark & { color: white; }    /* الأب ليس أول العنصر */
}

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .box {
    background: #ede9fe;
    padding: 14px;
    border-radius: 10px;

    p { margin: 0; color: #4c1d95; }

    &:hover { background: #ddd6fe; }
  }
</style>
<div class="box"><p>مرّر الفأرة فوقي — القاعدتان متداخلتان بلا أي معالج.</p></div>

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

أهم القيم

القيمة	الوظيفة
& بلاحقة	لإلحاق شيء بنفس الأب مباشرة: &:hover، &.class
& بموضع لاحق	عندما يأتي الأب في غير بداية الجملة: .dark &
نسل بسيط بلا &	.parent { h2 { } } يعمل تلقائيًا كنسل عادي

💡 نصائح عملية

لا حاجة لبناء مشروع أو أداة خارجية — يعمل حيث تعمل CSS العادية
عند الشك في الحاجة لـ&، جرّب بدونه أولًا للنسل البسيط قبل إضافته

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

الظن أن & مطلوبة دائمًا كما في SASS — لم تعد كذلك للنسل البسيط
الخلط بينه وبين تداخل SASS الذي يحتاج ترجمة (Build Step) ولا يعمل في المتصفح مباشرة

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

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