css - Make the parent div block inner element from being selected -

i have following html:

<div class="parent">     <span>random elements</span>     <img src="randomeimage.png" />     <etc...> </div> 

i want make parent div children elements act 1 entity. example, may not select (highlight) child element, or, click event anywhere (inside div, on children or whitespace) triggers parent click.

i have tried many css (blocks, floats, ...) not figure out final solution. i'd appreciate help.

if don't want use javascript create div position:absoulte; cover entire parent , it's children stop click events

here's demo of approach

the added html element: <div id='cover'></div>

and added css:

.parent {     background:teal;     height: 500px;     width:650px; } #cover {     position:absolute;     top:0; /* same object cover */     left:0; /* same object cover */     height:500px; /* same object cover */     width:650px; /* same object cover */     z-index:2; /* higher object cover */ }