Sign in

$8.89

What is the CSS :scope pseudo-class for?

Ask a question+
0

I need to understand what is :scope pseudo-class and how can I use it?

$ offer bounty
Alvard 790
add comment

2 Answers

1

The :scope CSS pseudo-class represents elements that are a reference point for selectors to suit against.
See the example:

!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .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;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
  </body>
</html>
Muhamed Aziz 210
add comment
0

The :scope CSS pseudoclass represents elements that are a reference point for selectors to match against. Currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicity establish a scoped element.

[email protected] 10
add comment

Your Answer

how it works
asked
viewed18

Related