انتخابگرهای جاگذاری 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;  } 
}

جزئیات فنی

پشتیبانی مرورگر