1
私が持っているのは、1つのフィールドセットに複数の他のフィールドセットを含むフォームです。各フィールドセットについて、ユーザは凡例の横にあるボックスをチェックし、そのフィールドセットを展開することができます（少なくとも理論的には）。純粋なCSSを使って試してみるといいと思っていましたが、DOM内の2つの要素の位置に基づいてルールを書き込む方法が悩まされています。ここではHTMLです：最初のアイデアでDOMの属性+兄弟のCSSルール
<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>
は私には少しハックっぽいに見えたが、私は、W3Cのバリデータを通してそれを走った、そしてそれは伝説の中に埋め込まれた入力に渡さyipiee。だから私は私がjavascript/jqueryを使って得たものを得ることができると確信していますが、古いブラウザがそれをサポートしていなくても、CSSでそれを行うためのコンセプトを証明するのは嫌です。
私はこのルールを試してみました：
.area ul {
color: red;
}
.area input:checked + ul {
color: blue;
}
しかし、運に。はるかに簡単なテストで、私が働いている両方のブラウザ（Chrome、FF 3.5）は、入力が単にulである場合はinput:checked + ulを実行できることを確認しました。私は両方のルール（簡略版で）を持っていれば色を切り替えます。
しかし、チェックされた要素が凡例タグであり、したがってULの直接の兄弟でない場合、ULを参照する方法があるかどうかはわかりません。 「入力を含む伝説の兄弟...」と言ってもいいでしょうか？
ありがとうございます。
パネルの表示を切り替えるためのチェックボックスを使用することは、従来とは異なります。ツリー状の矢印（下向きまたは横向き）、または凡例がクリック可能に見えるようにされている場合は、凡例をクリックするだけで表示を切り替えるのが一般的です。 –