Your html is different than what’s listed on the tutorial (code below is what I saw on the site). The css defining the background-color targets the first nested two levels deep inside a .game-square div. Your div blocks only go one level deep, so there’s nothing there to color.
<div class='game-square'>
<div>
<div>This tag will be colored!</div>
<div></div>
</div>
</div>
Hello you problem is in this .game-square > div > div:first-child this would mean the first grandchild of .game-square but it doesn’t have any grand children so you should remove the div in the middle to fix the problem
final answer > replace .game-square > div > div:first-child with .game-square > div:first-child
I’m very new to programming and i’m putting my basic knowledge to test by trying learn to build a concentration game following a Make school tutorial.
I’m trying to make my “default” tiles grey but cant seem to get that to happen and don’t know where i’m going wrong?
Below is the link to the game i am trying to learn to build. Step 4 is where the styling starts.
Thanks
Luke.
.game-square {
box-sizing: border-box;
border: 1px solid #000;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.game-square > div {
width: 100%;
height: 200%;
position: absolute;
top: 0;
}
.game-square > div > div {
height: 50%;
}
.game-square > div > div:first-child {
background-color: gray;
}
.flip > div {
top: -100%;<!DOCTYPE html>
<html lang="en">
<head>
<title>Concentration Game</title>
<link href= "./styles.css" rel="stylesheet" type= "text/css">
</head>
<body>
<div class="container">
<div id="game">
<button id= "reset-button">Reset</button>
<div class= "game-square">
<div></div>
<div></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-2"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-3"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-4"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-5"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-6"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-7"></div>
</div>
<div class= "game-square">
<div></div>
<div class="square-8"></div>
</div>`
Can you add some code that you have tried to use so far, please?
Should be
Thank you @dgknca that seemed to have done the job.
Hi @JakubASuplicki I thought it was a typo at my end as the course shows to write the line of code as follows .game-square > div >div:first-child which is what I did but it didn’t seem to give me the grey squares. I have re-written it the same as mentioned in the above comment from dgknca and has worked. I’m not sure if that will effect the code down the track though as the code from the course is showing different. perhaps its a mistake on the course?