CSS inheritance not working

Issue

Screenshot 1

Screenshot 2

I am currently stuck on a css issue. Basically I have defined a style rule like this:

#divMyList tbody tr td{
    cursor:pointer;
    border-right:5px solid white;
    padding:10px;
    width:200px;
}

I'm applying another class named tmenu on my td in the <div> like this:

<td class="tmenu"> foo </td>

so that it inherits all the color and other combinations from along with my overridden styles in #divMyList tbody tr td I mentioned above. This is working fine for me.

Now, I want to implement the selected style of tmenu to my current <td> element so that when someone clicks on it, it inherits the selected style of tmenu class. The tmenu and its selected styles are defined like this:

.tmenu {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: normal;
}

.tmenu ul li {
    /* ..... */
}

.tmenu ul li.selected {
    cursor: default;
}

When I do like this:

<td class="tmenu selected">foo</td>

it doesn't apply the rules of the selected class to my td element. Any help on what I'm doing wrong. Do I need another rule mixing all of these in a new class?

Solution

the way you have defined your table, your css should look like this

#divMyList tbody tr td{
    cursor:pointer;
    border-right:5px solid white;
    padding:10px;
    width:200px;
}

.topmenu {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: normal;
}

.topmenu td.selected{
    cursor: default!important;
}

I have put together a fiddle and added a color to show that it is getting styled

Answered By - Rachel Gallen