Changing color of table data using class

#1

I can’t change text color of table elements using a class name after I have already set a text color using tag name td. Below is the piece of code I’m having problem with.

td{
height: 50px;
font-size: 20px;
color: #f7b76d;
}
.tr-out-of-stock:hover{
color: white;
background-color: #ffcccc;
}
.tr-in-stock:hover{
color: black;
background-color: #ccffe6;
}

#2

In your code, the td selector has a lower specificity than the class selectors .tr-out-of-stock and .tr-in-stock . So, the color defined in the td selector will be applied to all the td elements in the table

td {
    height: 50px;
    font-size: 20px;
    color: #f7b76d;
}

tr .tr-out-of-stock:hover {
    color: white;
    background-color: #ffcccc;
}

tr .tr-in-stock:hover {
    color: black;
    background-color: #ccffe6;
}
#3

Thank you for clearing my doubt.

1 Like