How to get an element inside nested divs by class name?

Question

A webpage with HTML looks like this:

<div id="Parent-div" > </div>
<div class="first-child-div"> </div>
<div class=" second-child-div"> 
    <div class="first-grand-child"> </div>
    <div class="second-grand-child"> </div>
    <div class="Third-grand-child"> 
        <div class="Grand-grand child"> 
           <button  class="Confirm-button">Confirm!</button> 
        </div>
    </div>
</div>

I've Tried This code using greasemonkey to remove a button from the div with the class named "Grand-grand child"

This is what I did:

var targetDiv = document.querySelector("#<Parent-div>. Grand-grand.child");

targetDiv.innerHTML = "Hello world!";

The Button wasn't replaced by the Hello world! text, What did I do wrong?

Answer 1

document.querySelector('.Grand.grand.child');

Demo: http://jsfiddle.net/yGv3v/