قانون @scope CSS

تعریف و استفاده

CSS @scope این قوانین اجازه می‌دهد تا عناصر در درخت DOM خاصی را انتخاب کنید.

با این @ قوانین، می‌توانید به طور دقیق به عناصر دسترسی پیدا کنید بدون اینکه نیاز به نوشتن انتخاب‌گرهای خیلی خاص داشته باشید.

این @ قوانین همچنین کاهش می‌دهد که انتخاب‌گر با ساختار DOM پیچیده شود.

مثال

مثال 1

در اینجا از دو @scope بخش به منظور تطابق با عناصر <a> در کلاس‌های .ex1 و .ex2 استفاده می‌شود.:scope برای انتخاب و تنظیم استایل مرجع استفاده می‌شود. در این مثال، مرجع استایل، عناصر <div> است که به کلاس‌ها اعمال شده‌اند:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

آزمایش کنید

HTML زیر را مشاهده کنید:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

در اینجا چند عنصر <div> مرتبط هستند، اگر بخواهیم استایل‌های <h2> و <img> در بخش container/news تنظیم کنیم، باید محتوا زیر را بنویسیم (بدون استفاده از @scope):

مثال 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

آزمایش کنید

استفاده از @scope قوانین، شما می‌توانید به دقت عناصر را定位 کنید بدون اینکه نیاز به نوشتن انتخابگرهای پیچیده داشته باشید، مانند:

مثال 3

در اینجا، ما تنها برای عناصر <h2> و <img> در component .container، .container را به عنوان ریشه محدوده قوانین @scope تنظیم می‌کنیم:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

آزمایش کنید

@scope قوانین شامل یک یا چند مجموعه قوانین هستند و می‌توانند به دو روش استفاده شوند:

• به عنوان یک بلوک مستقل CSS، در این حالت، شامل یک بخش پیش‌رو است که شامل ریشه محدوده و انتخابگر محدودیت‌های محدوده انتخابی است - که محدوده بالایی و پایینی محدوده را تعریف می‌کند.
• به عنوان استایل‌های درون‌مایه در <style> HTML، در این حالت، بخش پیش‌رو حذف شده و مجموعه قوانین شامل به صورت خودکار به عنصر والد <style> اعمال می‌شود.

مثال 4

محدوده حلقه‌ای "دایره‌ای" تنها برای عناصر بین دو عنصر در درخت اجداد محدود است. این مثال است:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

آزمایش کنید

زبان CSS

@scope (ریشه محدوده) {
  مجموعه قوانین
}

یا

/* محدوده حلقه‌ای */
@scope (ریشه محدوده) to (محدودیت‌های محدوده) {
  مجموعه قوانین
}

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

اعداد در جدول نشان‌دهنده نسخه‌ای اولین از مرورگرهای پشتیبان از این @ قوانین هستند.