:scope¶
Псевдокласс :scope
представляет собой элементы, которые являются ориентиром для селекторов, чтобы соответствовать против.
В настоящее время при использовании в таблице стилей :scope
совпадает с :root
, поскольку в настоящее время нет способа явно установить элемент области действия. При использовании из DOM API, такого как querySelector()
, querySelectorAll()
, match()
или Element.closest()
, :scope
соответствует элементу, для которого вы вызвали метод.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
/* Selects a scoped element */
:scope {
background-color: lime;
}
Спецификация¶
Примеры¶
Пример 1¶
В этом простом примере мы демонстрируем, что использование псевдокласса :scope
из метода Element.matches()
соответствует элементу, для которого он вызывается.
let paragraph = document.getElementById('para')
let output = document.getElementById('output')
if (paragraph.matches(':scope')) {
output.innerText =
'Yep, the element is its own scope as expected!'
}
<p id="para">
This is a paragraph. It is not an interesting paragraph.
Sorry about that.
</p>
<p id="output"></p>
Пример 2¶
Ситуация, когда псевдокласс :scope
оказывается полезной, - это когда вам нужно получить прямого потомка уже извлеченного элемента.
var context = document.getElementById('context')
var selected = context.querySelectorAll(':scope > div')
document.getElementById(
'results'
).innerHTML = Array.prototype.map
.call(selected, function (element) {
return '#' + element.getAttribute('id')
})
.join(', ')
<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 elements ids :
<span id="results"></span>
</p>
См. также¶
Ссылки¶
- Псевдо-класс
:scope
MDN (рус.)