Set table cell content depending on index of the cell-CodePudding

Wish You all beautiful day,

I´m facing a little problem with my HTML&CSS project. I´m suppose to display smiley face on chess table depending on the cell. For white cells I should display f.e. this character: ☻ and for black cells this one: ☺. Here is my CSS "code":

.table {
  margin: auto;
  border: 2px solid black; 
  border-collapse: collapse;
  box-shadow: 1em 1em 0.5em #555;  
}

.table td {
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  height: 3em;
  width: 3em;
  border-collapse: collapse;
  border: none;
}

.table th {
  text-align: center;
  padding: 2px;
  border: 1px solid black; 
  height: 3em;
  width: 3em;
}

.table tr:nth-child(odd) th:nth-child(even), .table tr:nth-child(even) th:nth-child(odd) {
  background-color: black;
} 

.table tr:nth-child(odd) th:nth-child(even):hover::after, .table tr:nth-child(even) th:nth-child(odd):hover::after {
  font-size: 2em;
  content: '☺';
}

.table tr:nth-child(odd) th:nth-child(odd):hover::after, .table tr:nth-child(even) th:nth-child(even):hover::after {
  font-size: 2em;
  content: '☻';
}

.billboard {
  text-align: center;
  margin: 2em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 1px solid black;
  width: 500px;
  box-shadow: 1em 1em 0.5em #555;
}

Smiley face for white cells is displayed correctly, however when it comes to black cells nothing is displayed. I assume that it has something to do with a fact that I set background-color attribute for the black cells, but Idk how to fix it :).

Any help will be welcomed

CodePudding user response：

The default color (black) is applied for the content. You should add color:white for black background cells.

Hover over the cells now.

.table {
  margin: auto;
  border: 2px solid black; 
  border-collapse: collapse;
  box-shadow: 1em 1em 0.5em #555;  
}

.table td {
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  height: 3em;
  width: 3em;
  border-collapse: collapse;
  border: none;
}

.table th {
  text-align: center;
  padding: 2px;
  border: 1px solid black; 
  height: 3em;
  width: 3em;
}

.table tr:nth-child(odd) th:nth-child(even), .table tr:nth-child(even) th:nth-child(odd) {
  background-color: black;
} 
.table tr:nth-child(odd) th:nth-child(odd):hover::after {color: #000; content: '☺'; font-size: 2em;}

.table tr:nth-child(even) th:nth-child(odd):hover::after {
  font-size: 2em;
  content: '☺';
  color: #fff;
}

<table class="table">
  <tr>
    <th></th>
  </tr>
  <tr>
    <th></th>
  </tr>
</table>