انتخابگرهای درون‌گذاری 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 {
  اظهارات css;
  & childrule {
    اظهارات css;  } 
}

جزئیات فنی

پردازشگرهای اینترنت پشتیبانی می‌کنند