Псевдокласс :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.

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