I need to understand what is :scope pseudo-class and how can I use it?
$ offer bounty
share
add comment
2 Answers
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>
share
add comment
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.
share
add comment
Your Answer
asked | |
viewed | 18 |
Related
- 1Emulate class private members in JS
- 2How change an HTML5 input's placeholder color with CSS ?
- 1How to run CSS Gradients diagonally?
- 1How to create an endlessly rotating ( spinning) image with CSS
- 4what is css gradients ?
- 1How can I transition height: 0; to height: auto; using CSS?
- 3When to use margin vs padding in CSS ?
- 2What is the scope of variables in JavaScript?
- 4How to Add Background Image using CSS styles?
- 0C# Constructors In Class Hierarchy
- 1How to selects all elements in a document | CSS