How to set two pseudo classes on an element?

Go To StackoverFlow.com

2

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?

2012-04-05 14:56
by Jesse Atkinson
Here's a jsbin for anyone who wants to test it - FakeRainBrigand 2012-04-05 15:00
What is the purpose of giving an invisible element a background-color - Frank van Wijk 2012-04-05 15:01
@Mikey It's giving visible <li> elements a color - Rob W 2012-04-05 15:02
What are you actually trying to do? Implement zebra striping while making sure it still works when some li are hidden - thirtydot 2012-04-05 15:10
Yes, thirtydot. Yes : - Jesse Atkinson 2012-04-05 15:21


0

: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.

2012-04-05 14:59
by Rob W


0

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>
2012-04-05 15:07
by FakeRainBrigand
Add display:none to one of the list elements, and you'll see that the resulting effect is not desired: http://jsbin.com/uxuleg/3/edit - Rob W 2012-04-05 15:10
Ads