Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated.
As far as I know, it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><a href="http://www.bbc.co.uk/persian"><img src="images/2.png"></a></div>
<div class="two"><a href="http://www.aljazeera.com"><img src="images/3.png"></a></div>
<div class="three"><a href="http://www.bbc.co.uk/news"><img src="images/4.png"></a></div>
<div class="four"><a href="http://www.yahoo.com"><img src="images/1.png"></a></div>
<div class="five"><a href="http://www.html5nurse.com"><img src="images/5.png"></a></div>
<div class="six"><a href="http://www.cnn.com"><img src="images/6.png"></a></div>
</div>
</div>
</body>
</html>