Hover not working with nth-child

css, css-selectors, hover

Solution

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;
}

Problem

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!?

Original source