CSS :scope Pseudo Class

The CSS :scope pseudo-class represents elements that are a reference point for selectors.

The :scope is the same as :root since, at the moment, there is not a way to explicitly establish a scoped element.

Scope element is an element forming a context for a block of styles.


Selectors Level 4


:scope {
  css declarations;

Example of the :scope selector:

<!DOCTYPE html>
    <title>Title of the document</title>
      .container {
      margin: 40px auto;
      max-width: 700px;
      background-color: #eeeeee;
      padding: 20px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      section {
      padding: 30px;
      :scope {
      background-color: #1c87c9;
    <h2>:scope selector example</h2>
    <div class="container">
          Inside the scope.

Browser support

27.0+ x 32.0+ 7.0+ 15.0+

Practice Your Knowledge

Which statement is incorrect about CSS :scope pseudo class?

Do you find this helpful?

Related articles