How to hide/display an anonymous div without affect other divs - html

Question

I want to hide an anonymous-child div which has a child-div also. I want also to display the anonymous div by clicking on div#child2.
I don't have any authority to change/add/remove ids or classes.
So I did this:
<div id="parent">
<!-- the anonymous div which I want to hide and display by clicking on div#child-2 -->
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
CSS
div#parent div:first-child {
display: none;
}
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block !important";
}
</script>
The problem is that this type of css has affected the div#child-of-child and div#Container1 because the css reffering to every first child of any div.
So, my first question is:
How can I hide the anonymous div without having any effect to another div and display that later by clicking on div#child-2.
Second:
In this type of javascript code the styling of "block !important" works as it is?
Third:
The div#child2 doesn't have any content by itself. It includes another div which has content. If I set on div#child2 an event like onclick="appear()"; it works?
Forth:
In case that there is no way to avoid any effect to other divs is there any way to display the anonymous div and div#Container1?

Answer 1

Try this to only hide the first child within the #parent div:
div#parent div:first-child div:first-child {
display: none;
}
EDIT
To make Container1 appear afterwards, do the following in js (notice: I removed `!important' as I don't believe that is allowed, removing it made the code work - you can try it out below through the Fiddle link):
function appear() {
document.getElementById("Container1").style.display="block";
}
FIDDLER