CODEWITHSUNDEEP
css
user1048676
user1048676

Reputation: 10076

Having multiple classes on a table row

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

Answers (2)

Musa
Musa

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

Andy
Andy

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

Related Questions