CSS rule for attribute + sibling in DOM

Question

What I have is a form with one fieldset containing several other fieldsets. For each fieldset, the user can check a box next to the legend and expand that fieldset (in theory, at least). I was thinking it would be cool to try using pure CSS for the effect, but I'm getting hung up on how to write the rule based on the two elements position to one another in the DOM. Here's the HTML:

 <fieldset id="areasofinterest">
     <legend>Areas of Interest Survey</legend>

 <p>Please Check The Areas Applicable to you and Answer the Coorepsonding Questions.</p>

<!--Area 1 Checkbox and Questions -->
<fieldset class="area">
 <legend>
  <input type="checkbox" value="area1" id="area1" />
  <label for="area1"> Area 1 :</label>
 </legend>
 <ul>
  <li>
   <label for="area1_q1">Q1</label>
   <input type="text" name="area1_q1" id="area1_q1" />
  </li>
  <li>
   <label for="area1_q2">Q2</label>
   <input type="text" name="area1_q2" id="area1_q2" />
  </li>
 </ul>
</fieldset>

<!--Area 2 Checkbox and Questions -->
<fieldset class="area">
 <legend>
  <input type="checkbox" value="area2" id="area2" />
  <label for="other"> Area 2 :</label>
 </legend>

 <ul>
  <li>
   <label for="area2_q1">Q1</label>
   <input type="text" name="area2_q1" id="area2_q1" />
  </li>
  <li>
   <label for="area2_q2">Q2</label>
   <input type="text" name="area2_q2" id="area2_q2" />
  </li>
 </ul>
</fieldset>

  </fieldset>

At first the idea seemed a bit hack-ish to me, but I ran it through the w3c validator, and yipiee it passed with inputs embedded within legends. So I'm sure I can get what I'm after using javascript/jquery, but I'd hate to at least have a proof of concept for doing it with CSS, even if older browsers may not support it.

I tried this rule:

.area ul {
    color: red;
 }

 .area input:checked + ul {
    color: blue;
 }

But with no luck. I confirmed with a much simpler test that both browsers I'm working with (Chrome, FF 3.5) can do input:checked + ul if it's simply an input followed by a ul. And it does toggle colors if I have both rules (in the simplified version).

But I'm not sure if there is a way to refer to the UL if the checked element is whithin the legend tag and thus not a direct sibling of the UL. Is there maybe a way to say "siblings of legends which contain inputs which are checked..."?

Thanks for the help.

Answer 1

Nope.

"siblings of legends which contain inputs which are checked..."

Your problem is at the "contain" step. You can't move up the DOM like that. An element can't be selected in CSS based on children (or the children's contents or attributes).

You are also using a form element for visual interaction (and a legend), which is odd. I think you are better off with javascript. I can imagine other CSS-only solutions, but none that I would expect to be browser-compatible enough to trust with hiding and showing forms.

Answer 2

My first thought, is that this won't work with CSS alone. I don't think you'll be able to do this without javascript. You can use the selectors in jQuery, for example and get the parent node through Javascript.

Also, I wondered if, after 'checking' a checkbox, a CSS pattern would match input[checked='checked'] ... like:

.area input + ul{ // not expanded }

.area input[checked='checked'] + ul{ // expanded }

It didn't work though so you'd need to use javascript just to implement the change in checked / unchecked. I'd uses something other than a checkbox as suggested previously too.

Answer 3

The adjacent selector (+) obviously selects adjacent elements. You need a parent selector, which unfortunately doesn't exist (despite some proposals made to the w3c in the past).

Javascript (parentNode) is the only choice.