مختارر التضمين CSS (&)

التعريف والاستخدام

CSS التضمين (&) المختارر تستخدم لتطبيق النمط على العنصر في سياق عنصر آخر.

يقلل التضمين من الحاجة إلى تكرار المختارر للعناصر ذات الصلة.

مثال

مثال 1

قبل التضمين، يجب أن تُعلن عن كل مختارر بشكل واضح، مثلما هو موضح أدناه:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

جرب بنفسك

مثال 2

بعد التضمين، يتم استمرار المختارر، وتجميع قواعد النمط ذات الصلة في القاعدة الأم:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

جرب بنفسك

نصيحة:إذا كان يجب إزالة نمط .box من مشروعك، يمكنك إزالة المجموعة بأكملها دون الحاجة إلى البحث عن المختارر المتعلق.

قواعد CSS

parentrule {
  declarations css;
  & childrule {
    declarations css;  } 
}

تفاصيل التقنية

دعم المتصفح