Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> @scope (.container) to (.news) { h2 { font-size: 30px; color: green; } img { border: 5px solid maroon; } } </style> </head> <body> <h1>Using the @scope rule - A donut scope</h1> <p>A donut scope only targets elements that are placed between two elements in the ancestor tree. So, what this will do is, it will only focus on the elements that are placed inside .container, but not inside .news</p> <div class="container"> <img src="w3logo.png" alt="W3 logo"> <div class="news"> <h2>Some header</h2> <img src="w3logo.png" alt="W3 logo"> </div> </div> </body> </html>
