I'm making a chess board in HTML and CSS, I don't have problem making it, but there's a question :)

By attending to the code, I have a "board" class that is the parents of my "row" classes and rows are parents of my "cell" classes.

.board{
    width: 600px;
    height: 600px;
    margin:70px auto;
}

.board .row{float: left;}

.board .row .cell{
    width: 75px;
    height: 75px;
    float: left;
}

.board .row:nth-child(odd) .cell:nth-child(odd){background-color: white;}
.board .row:nth-child(even) .cell:nth-child(even){background-color: white;}
.board .row:nth-child(odd) .cell:nth-child(even){background-color: #222;}
.board .row:nth-child(even) .cell:nth-child(odd){background-color: #222;}

.board .row:hover .cell:hover {background-color: rgb(118, 194, 204);}

So, when I use .board .row .cell:hover {background-color:color;} It doesn't work.

But When I use the code written in the code above it works.

Why the first one doesn't work ? I think the problem is that I colorize my cells with odd and even order, because when I coloize them in other ways it works with the first one, but I what to colorize my cells with the way I did.