Is there a way to hide a SELECT based on the value of another SELECT using only CSS?

I have 2 SELECT elements, but I only want to display the second if the first has a specif开发者_如何学运维ic value.

I know how to do this with javascript, but I was hoping I could use an adjacent sibling selector to accomplish this with pure HTML/CSS:

<style>
  select[name=select2] { display:none; }
  select[value=show] + select[name=select2] { display:auto; }
</style>

<select name="select1">
  <option value="show">Show Select 2</option>
  <option value="hide">Hide Select 2</option>
</select>
<select name="select2">
</select>

Unfortunately, I can't get this to work. I imagine it's because value isn't a real attribute of a SELECT, but I'm not sure. Any ideas what is going on here?

Here's a fiddle to test with: http://jsfiddle.net/rr24g/

no, totally impossible, because css is "cascading" you can't go upwards

/* pseudo code - doesn't work, just demonstrating the problem */
select[name=select1] > option[value=show][selected] ::parent:: + select[name=select2]

you need javascript!

I'm going to say "No". You're coding UI based on business logic specifically. CSS wasn't designed for that. Keep it in javascript.

You might be able to do something with :hover using the top level selects.

Otherwise, I think a js solution is in order.