Applying tr:hover but only to a certain class-CodePudding

I have some CSS that colors a row on my table on hover.

tr:hover {
  background: gray !important;
}

However, it also highlights the filter row on the table. So I did Inspect and find it has <tr class="MuiTableRow-root MuiTableRow-hover"...etc

So, my question is, how can I modify the above code so that it applies only to that class shown above?

Edit: First attempt at apply class.

.MuiTableRow-root MuiTableRow-hover {
  tr:hover {
    background: gray !important;
  }
}

CodePudding user response：

As pointed out in the comments, please take a look at the documentation for class selectors.

You are having trouble to combine the class with the element's tag.
In this case they are written together like this:

tr.MuiTableRow-hover:hover {
  background: gray !important;
}

When the HTML tag has the class: Write the tag and . and then the class
When the HTML tag has some element inside with a certain class, separate them with a space
Do yourself a favor and search for CSS tutorials to teach you the basics. It's not very hard to learn if you can spare the time

A little bit advanced is trusting CSS Specificity and leaving out !important. If your selector is more specific (or your CSS was loaded later) your style will be applied even without use of !important.

tr.MuiTableRow-hover:hover {
  background: gray;
}

CodePudding user response：

The css rule should look like this:

tr.MuiTableRow-hover:hover {
   background: gray !important;
}

Note that using !important is not best practice so better if you try to avoid it if possible