Aturan @scope CSS

definisi dan penggunaan

CSS @scope Aturan ini memungkinkan Anda memilih elemen di dalam pohon DOM khusus.

Dengan aturan @ ini, Anda dapat menempatkan elemen dengan akurat tanpa menulis pemilih yang terlalu spesifik.

Aturan @ ini juga mengurangi koneksi pemilih dengan struktur DOM.

instansi

contoh 1

Disini, kami menggunakan dua yang berbeda @scope Blok untuk mencocokkan .ex1 kelas dan .ex2 elemen <a>. :scope digunakan untuk memilih dan menata gaya dalam lingkungan utama. Dalam contoh ini, akar lingkungan utama adalah elemen <div> yang menerapkan kelas:

@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;
  }
}

Coba sendiri

Lihat HTML berikut:

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

Di sini ada beberapa elemen <div> yang terdapat, jika kami ingin menata gaya untuk elemen <h2> dan <img> di bagian container/news di atas, maka harus menulis berikut ini (tanpa @scope):

Contoh 2

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

Coba sendiri

Menggunakan @scope Aturan, Anda dapat menempatkan elemen dengan akurat tanpa menulis pemilih yang terlalu kompleks, seperti berikut:

Contoh 3

Di sini, kami hanya mengatur .container komponen <h2> dan <img> elemen, mengatur .container sebagai root area aturan @scope:

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

Coba sendiri

@scope Aturan mengandung satu atau lebih koleksi aturan yang dapat digunakan dalam dua cara:

• Sebagai blok terpisah dalam CSS, dalam kasus ini, ia mengandung bagian awal, termasuk root area dan pilihan batasan area pemilihan pilihan—yang menentukan batas atas dan bawah area scope.
• Sebagai gaya dalam <style> HTML, dalam kasus ini, bagian awal diabaikan dan aturan yang disertakan akan berlaku otomatis untuk elemen induk <style>.

Contoh 4

“Area scope berlekuk”hanya berlaku untuk elemen yang berada di antara dua elemen di pohon penyangkalan. Ini adalah contoh:

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

Coba sendiri

Syarat CSS

@scope (Root area) {
  Koleksi aturan
}

atau

/* Area scope berlekuk */
@scope (Root area) ke (Batasan area) {
  Koleksi aturan
}

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung @ aturan ini.