Back to the index.
Scoped styles allow you to define styles for a subsection of the document.
The example below gets its styles from a regular style sheet. It should have a gradient. If it doesn’t, the scoped style below is not properly scoped and also affects this paragraph.
This is a test element with some styles, including a gradient.
The second paragraph below is in a div, which contains a scoped style. The background: none should only be applied to the test element below.
This is a test element that should not have a gradient.
<div>
<style scoped>
p.test {
color: black;
background: none;
}
</style>
<p class="test">This is a test element that should not have a gradient.</p>
</div>