:scope
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
:scope là lớp giả CSS đại diện cho các phần tử là điểm tham chiếu, hay phạm vi, để các bộ chọn khớp với.
/* Chọn một phần tử có phạm vi */
:scope {
background-color: lime;
}
Phần tử nào mà :scope khớp phụ thuộc vào ngữ cảnh sử dụng của nó:
- Khi dùng ở cấp độ gốc của stylesheet,
:scopetương đương với:root, trong một tài liệu HTML thông thường sẽ khớp với phần tử<html>. - Khi dùng bên trong một khối
@scope,:scopekhớp với phần tử gốc của phạm vi được định nghĩa bởi khối đó. Nó cung cấp cách áp dụng kiểu cho gốc của phạm vi từ bên trong chính khối@scope. - Khi dùng trong một lời gọi DOM API — chẳng hạn như
querySelector(),querySelectorAll(),matches(), hoặcElement.closest()—:scopekhớp với phần tử mà phương thức được gọi trên đó.
Cú pháp
:scope {
/* ... */
}
Ví dụ
Sử dụng :scope thay thế cho :root
Ví dụ này cho thấy :scope tương đương với :root khi dùng ở cấp độ gốc của stylesheet. Trong trường hợp này, CSS được cung cấp sẽ tô màu nền của phần tử <html> thành màu cam.
:scope {
background-color: orange;
}
Sử dụng :scope để tạo kiểu cho gốc phạm vi trong khối @scope
Trong ví dụ này, chúng ta dùng hai khối @scope riêng biệt để khớp với các liên kết bên trong các phần tử có lớp .light-scheme và .dark-scheme tương ứng. Lưu ý cách :scope được dùng để chọn và cung cấp kiểu cho chính các gốc phạm vi. Trong ví dụ này, các gốc phạm vi là các phần tử <div> có các lớp được áp dụng cho chúng.
HTML
<div class="light-scheme">
<p>
MDN contains lots of information about
<a href="/vi/docs/Web/HTML">HTML</a>,
<a href="/vi/docs/Web/CSS">CSS</a>, and
<a href="/vi/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
<div class="dark-scheme">
<p>
MDN contains lots of information about
<a href="/vi/docs/Web/HTML">HTML</a>,
<a href="/vi/docs/Web/CSS">CSS</a>, and
<a href="/vi/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
CSS
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: indigo;
}
}
@scope (.dark-scheme) {
:scope {
background-color: indigo;
color: antiquewhite;
}
a {
color: plum;
}
}
Kết quả
Sử dụng :scope trong JavaScript
Ví dụ này minh họa cách sử dụng lớp giả :scope trong JavaScript. Điều này có thể hữu ích nếu bạn cần lấy một phần tử con trực tiếp của một Element đã được truy xuất.
HTML
<div id="context">
<div id="element-1">
<div id="element-1-1"></div>
<div id="element-1-2"></div>
</div>
<div id="element-2">
<div id="element-2-1"></div>
</div>
</div>
<p>
Selected element ids :
<span id="results"></span>
</p>
JavaScript
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").textContent = [...selected]
.map((element) => `#${element.id}`)
.join(", ");
Kết quả
Phạm vi của context là phần tử có id là context. Các phần tử được chọn là các phần tử <div> là con trực tiếp của context đó — element-1 và element-2 — nhưng không phải các phần tử con cháu của chúng.
Đặc tả
| Specification |
|---|
| Selectors Level 4 # the-scope-pseudo |