Estoy haciendo un tablero de ajedrez en HTML y CSS, no tengo problema en hacerlo, pero hay una duda :)

Al prestar atención al código, tengo una clase de "tablero" que son los padres de mis clases de "fila" y las filas son los padres de mis clases de "célula".

 .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);}

Entonces, cuando uso .board .row .cell:hover {background-color:color;} No funciona.

Pero cuando uso el código escrito en el código anterior, funciona.

¿Por qué el primero no funciona? Creo que el problema es que coloreo mis celdas con orden par e impar, porque cuando las coloreo de otras maneras funciona con la primera, pero quiero colorear mis celdas de la forma en que lo hice.