Question

I have in my CSS file:

.my_table tr {
    background:#BBBBBB;
}

and

.my_table tr .hover_style {
    background:#AAAAAA;
}

in my HTML I have all rows of my table with hover_style:

<table class='my_table'>
    <tr class='hover_style'>
    ...
    </tr>
</table>

but all rows have #BBBBBB color but I have expected to have overridden color #AAAAAA;

Where am I wrong?

Answer 1

You have a space in your hover style.

.my_table tr.hover_style {
    background:#AAAAAA;
}

EDIT: If you have a space after your selector it will style all descendants that has the hover_style defined. In this case what you’re saying is “Style all my_table table row descendants that has the class hover_style”. What you want is no space, which will style all td rows under .my_table that has the class name hover_style.