This works:

#sList li:visible {
    background: rgba(255,255,136,0.5);
}

This works:

#sList li:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

This doesn't:

#sList li:visible:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

Hmm... any help?

EDIT: To elaborate — I have a search field that — on .keyup — filters a <ul> below it.

Think a faux-Google Instant Search type thing. I want the backgrounds to be staggered in color. They are when the page loads, but as soon as you start typing and elements begin to be eliminated from the list the zebra striping background pattern goes away and becomes inconsistent because certain elements are now hidden. I wanted to do something where on every .keyup of the search field the zebra striping is re-applied so that the list remains consistently striped.

Make sense?

• css

:nth-of-type only considers the element's tag type. There is no way to make this pseudo-selector select the nth matched element.

Also, :visible is not a valid pseudo-selector.

According to SitePoint's list of pseudoclasses, there is no :visible. Let's use an example with :hover instead.

demo

When we have a list, we can use the two classes to say highlight it if, and only if, the element is an odd child AND hovered. Notice how the ipsum's don't highlight when hovered, but the Lorem's do.

#sList3 li:hover:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

<ul id="sList3">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
</ul>