Hover not working with nth-child

Question

He I am exploring the features of CSS 3 and I walked into some trouble:

For a table I have made this CSS:

table.sortable tbody tr td {
    border-bottom:1px solid;
    height: 20px;
}

table.sortable tbody tr:hover {
    background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) td {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) td {
    background-color: #FFFFFF;
}

table.new{
    background-color: rgb(255, 255, 187);
}

table.reaction{
    background-color: rgb(255, 128, 64);
}

table.send{
    background-color: rgba(154, 211, 109, 0.470588);
}

The problem is that the hover is not working but if I comment the nth-child selector out it does actually work. Also in some cases I have to give some rows different background color's. This is for the users so they can see the status of some stuf really easy. So if I assign a class like class="send" to a row it has to get the background color form the class send.

Why is this not working out?! or did I miss something!?

Answer 1

You are applying the background-color for the nth-child rows to the td. The background-color on the td is showing above the background-color of the tr.

Changing your CSS to the following worked for me (remove the td from the end nth-child selectors):

table.sortable tbody tr:hover {
    background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

---

OR

Add td to the end of your hover selector, like so:

table.sortable tbody tr:hover td {
    background-color:#BCD2E5 !important;
}

See this codepen: http://codepen.io/keithwyland/pen/woLmh

---

ALSO

If you move the hover selector after the nth-child selectors in the CSS, then you shouldn't need the !important. So, like this:

table.sortable tbody tr:nth-child(odd) {
    background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

table.sortable tbody tr:hover {
    background-color:#BCD2E5;
}