Question

All,
I’ve got the following CSS for an HTML row:

.clickable_row:hover {
cursor: pointer;
}
.clickable_row:hover {
background-color: #FFFFCF;
}

Then my html looks like this:

<tr class="clickable_row"><td>Text</td></tr>

However, for the highest row I’d like to add a highlighted class to it as well. I tried to do something like this:

<tr class="clickable_row highlighted"><td>Text</td></tr>

Then added the following CSS:

.clickable_row highlighed{
background-color: #BFDEFF;
}

This doesn’t highlight the row, any ideas on how to make this work?

Thanks

Answer 1

When you put a space in a class name, you are creating a completely new class, so <tr class="clickable_row highlighted"> creates the class “clickable_row” aswell as the class “highlighted”.

If you want to highlight it, just do .highlighted { background-color: #BFDEFF; }

Although, if you want to optimise, I’d probably recommend using the :first-child selector, this will highlight only the first row, without you needed to give it a separate class