:scope
Псевдокласс :scope CSS псевдокласса представляет элементы, которые являются точкой отсчёта или областью для сопоставления селекторов.
/* Selects a scoped element */
:scope {
background-color: lime;
}
Какие элементы :scope сопоставляются, зависит от контекста его использования:
- Когда используется на уровне корневого элемента таблицы стилей,
:scopeэквивалентен:root, который в обычном HTML-документе соответствует элементу<html>. - Когда используется внутри блока
@scope,:scopeсоответствует заданной области корневого элемента. Это предоставляет способ применения стилей к корневому элементу области изнутри самого блока@scope. - Когда используется в вызове API DOM — например, в
querySelector(),querySelectorAll(),matches()илиElement.closest()—:scopeсоответствует элементу, к которому был вызван метод.
Синтаксис
:scope {
/* ... */
}
Примеры
Использование :scope в качестве альтернативы :root
Этот пример показывает, что :scope эквивалентно :root при использовании на уровне корневого элемента таблицы стилей. В этом случае предоставленный CSS окрашивает фон элемента <html> в оранжевый цвет.
HTML
<html></html>
CSS
:scope {
background-color: orange;
}
Результат
Использование :scope для форматирования корня области в блоке @scope
В этом примере мы используем два отдельных блока @scope для сопоставления ссылок внутри элементов с классами .light-scheme и .dark-scheme соответственно. Обратите внимание, как :scope используется для выбора и форматирования самих корневых элементов области. В этом примере корневыми элементами области являются элементы <div> с применёнными классами.
HTML
<div class="light-scheme">
<p>
MDN contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
<div class="dark-scheme">
<p>
MDN contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
CSS
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: darkmagenta;
}
}
@scope (.dark-scheme) {
:scope {
background-color: darkmagenta;
color: antiquewhite;
}
a {
color: plum;
}
}
Результат
Использование :scope в JavaScript
Этот пример демонстрирует использование псевдокласса :scope в JavaScript. Это может быть полезно, если необходимо получить непосредственного потомка уже полученного элемента Element.
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 = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
Результат
Областью действия context является элемент с id context. Выбранные элементы — это элементы <div>, являющиеся непосредственными потомками этого контекста — element-1 и element-2 — но не их потомки.
Спецификации
| Спецификация |
|---|
| Selectors Level 4 # the-scope-pseudo |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
:scope |
27 | 79 | 32Firefox 55 удаляет поддержку<style scoped> , но не псевдокласса :scope, который по-прежнему поддерживается. <style scoped> позволило явно задавать области элементов, но продолжающиеся обсуждения дизайна этой функции, а также отсутствие других реализаций привели к решению об удалении. |
15 | 7 | 27 | 32Firefox 55 удаляет поддержку<style scoped> , но не псевдокласса :scope, который по-прежнему поддерживается. <style scoped> позволило явно задавать области элементов, но продолжающиеся обсуждения дизайна этой функции, а также отсутствие других реализаций привели к решению об удалении. |
15 | 7 | 1.5 | 4.4 |
dom_api |
27 | 79 | 32 | 15 | 7 | 27 | 32 | 15 | 7 | 1.5 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
