Псевдокласс :scope

Псевдокласс :scope добавит правила стиля к элементам HTML в определённой части страницы. Свойства стилей определяются элементом style с добавленным атрибутом scoped.

Применить

Правила стиля к определённой части страницы псевдоклассом :scope
Правила стиля к определённой части страницы
<style>
  li {
    color: orange;
  }
</style>

<!-- первый список -->

<ul>

  <style scoped>
    li {
      color: red;
    }
    :scope {
      border: 1px solid green;
    }
  </style>
  
  <li>Текст списка</li>
  <li>Текст списка</li>
  <li>Текст списка</li>
</ul>

<!-- втрой список -->

<ul>
  <li>Текст списка</li>
  <li>Текст списка</li>
  <li>Текст списка</li>
</ul>

Атрибут scoped для элемента style определяет контекст. В результате все пункты в первом списке будут красного цвета. Псевдокласс :scope добавит для элемента ul границу зеленого цвета. Цвет текста второго списка будет оранжевый без границы для элемента ul. Потому что контекст второго списка не принадлежит правилу :scope. Но если псевдокласс :scope добавить во внешней или основной style, правило будет действовать для всего документа HTML. По сути эквивалентен псевдоклассу :root.

Поддержка

Псевдокласс :scope селектор четвёртого уровня CSS4.

Таблица поддержки браузерами: “Псевдокласс :scope”

Еще псевдоклассы CSS4

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)