title: How to get an element inside nested divs by class name?
body: <p>A webpage with HTML looks like this:</p>
  
  <pre><code>&lt;div id="Parent-div" &gt; &lt;/div&gt;
  &lt;div class="first-child-div"&gt; &lt;/div&gt;
  &lt;div class=" second-child-div"&gt; 
      &lt;div class="first-grand-child"&gt; &lt;/div&gt;
      &lt;div class="second-grand-child"&gt; &lt;/div&gt;
      &lt;div class="Third-grand-child"&gt; 
          &lt;div class="Grand-grand child"&gt; 
             &lt;button  class="Confirm-button"&gt;Confirm!&lt;/button&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've Tried This code using greasemonkey to remove 
  a button from the div with the class named "Grand-grand child"</p>
  
  <p>This is what I did:</p>
  
  <pre><code>var targetDiv = document.querySelector("#&lt;Parent-div&gt;. Grand-grand.child");
  
  targetDiv.innerHTML = "Hello world!";
  </code></pre>
  
  <p>The Button wasn't replaced by the Hello world! text, What did I do wrong?</p>