CSS classes overlapping in an unintended way-CodePudding

What I'm trying to achieve is that when hovering over the td, that the background changes to black and the text color to white, but I only get the black background. I believe this happens because there is an interference with the "blueColor" and "redColor" classes with the "hover:hover" class.

td {
  text-align: center;
}

table {
  width: 100%;
  font-size: 35px;
  font-family: Arial;
  font-weight: bold;
}

.blackBorder {
  border: 1px solid black;
}

p.redColor {
  color: red;
}

p.blueColor {
  color: blue;
}

.lightGreenBackground {
  background-color: #b5f79e;
}

.hover:hover {
  background-color: black;
  color: white;
}

<table>
  <tr>
    <td >
      <p >1</p>
      <p >H</p>
    </td>
  </tr>
</table>

I have tried using the !important property without any success and I'm not allowed to use id's.

CodePudding user response：

Because you already have a color defined on p and not td.hover means you will have to change the color of <p> when td.hover is in a hovered state.

You'll notice if you remove both colors from your CSS, the text will turn white as expected on hover.

You can target both p's and change the color using .hover:hover > p.

td {
  text-align: center;
}

table {
  width: 100%;
  font-size: 35px;
  font-family: Arial;
  font-weight: bold;
}

.blackBorder {
  border: 1px solid black;
}

p.redColor {
  color: red;
}

p.blueColor {
  color: blue;
}

.lightGreenBackground {
  background-color: #b5f79e;
}

.hover:hover {
  background-color: black;
}

.hover:hover > p {
  color: #fff;
}

<table>
  <tr>
    <td >
      <p >1</p>
      <p >H</p>
    </td>
  </tr>
</table>