title: How do I change the style of an element inside a <div /> with JavaScript?
body: <p>I have an index.html like so:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;mydiv&quot;&gt;
    Text inside div
    &lt;h1&gt;
      Header inside div
    &lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;
    Header outside div
  &lt;/h1&gt;
  </code></pre>
  <p>And my style.css looks like this:</p>
  <pre class="lang-css prettyprint-override"><code>#mydiv h1 {
    color: blue;
  }
  </code></pre>
  <p>To change the color of &quot;Text inside div&quot; with JS, I can do this:</p>
  <pre class="lang-js prettyprint-override"><code>document.getElementById(&quot;mydiv&quot;).style.color = &quot;red&quot;;
  </code></pre>
  <p>But how do I change the color of &quot;Header inside div&quot; using only JS? (without modifying the HTML or CSS or changing h1 outside the div)</p>