How to specify that the styles only apply to this element's parent element and that element's child elements in HTML?

HTMLWeb DevelopmentFront End Technology

<p style="">Use the <em>scoped&nbsp;</em>attribute to specify that the styles only apply to the parent element and the element&rsquo;s child elements &minus;</p><h2 style="">Example</h2><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;h2 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:yellow; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;style scoped&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h2 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color:grey; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Grey Heading&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Yellow Heading&lt;/h2&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 03-Mar-2020 11:09:27

Advertisements