Bootstrap list group striped conflict with hover

Question

I'm trying to simulate twitter-bootstrap-3 .table-hover and table-striped on list-group. First I have tried the following for hover:

<!-- HTML --!>
<ul class="list-group list-group-hover">
  <li class="list-group-item">...
...
// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}

The above code works fine and it generates hover over each list's item.

However, trying to add striped like table as the following code, does not work, i.e the strip effect only works but the hover is not working.

<!-- HTML -->

<ul class="list-group list-group-hover list-group-striped">
...

// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}
ul.list-group.list-group-striped li:nth-of-type(odd){
    background: $table-bg-accent;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: $body-bg;
}

I don't know how could I make the two effects, hover and stripped, working at the same time as table do?

Answer 1

:hover needs to come last

ul.list-group.list-group-striped li:nth-of-type(odd){
    background: blue;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: purple;
}
ul.list-group.list-group-hover li:hover{
    background: red;
}

<ul class="list-group list-group-hover list-group-striped">
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
</ul>