Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> /* CSS styles for demonstration purposes */ .container { border: 1px solid #ccc; padding: 10px; } .highlighted { background-color: yellow; } </style> </head> <body> <h2>:scope Example</h2> <p> The :scope pseudo-class in CSS is used to select elements within a specific scoped container when using JavaScript with the querySelector or querySelectorAll methods. It is not used directly in standard CSS selectors like other pseudo-classes (:hover, :focus, etc.). </p> <div class="container"> <p>Paragraph 1</p> <div class="highlighted">Highlighted Div</div> <p>Paragraph 2</p> </div> <div class="container"> <p>Another container with paragraphs.</p> </div> <script> // Select elements within the first container using :scope const container = document.querySelector('.container'); const highlighted = container.querySelectorAll(':scope > .highlighted'); // Add a class to the highlighted element(s) highlighted.forEach(element => { element.classList.add('highlighted'); }); </script> </body> </html>