Reputation: 10076
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
Upvotes: 1
Views: 12721
Reputation: 97727
Use
.clickable_row.highlighed{
background-color: #BFDEFF;
}
or just
.highlighed{
background-color: #BFDEFF;
}
Your selector looks for a descendant of element with class clickable_row
which is a highlighed
tag
Upvotes: 2
Reputation: 14575
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
Upvotes: 2