隣接セレクタの適用範囲について。

http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E …

上記のサイトを参考に、CSSで開閉式のリストを作りました。

そのサイトのHTMLの1行目～10行目は下記の様になっています。

<div class="menu">
<label for="Panel1">ボタン1</label>
<input type="checkbox" id="Panel1" class="on-off" />
<ul>
<li><a href="">リンク1</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>

それに対応したCSSは、下記の様になっています。

input[type="checkbox"].on-off + ul{
height: 0;
overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
height: 200px;
}


つまり、
<input type="checkbox" id="Panel1" class="on-off" />　の後ろの　<ul>タグに働きかける構造になっています。

それを改良して、<ul>タグの部分だけでなく、幅広い範囲に働きかける構造にしたいです。

そこで、対応しているCSSの隣接セレクタ「+」の後ろの「ul」を「span」にして、HTMLも「span」タグで括りました。

input[type="checkbox"].on-off + span{
height: 0;
overflow: hidden;
}

input[type="checkbox"].on-off:checked + span{
height: 200px;
}

<div class="menu">
<label for="Panel1">ボタン1</label>
<input type="checkbox" id="Panel1" class="on-off" />
<span>
<ul>
<li><a href="">リンク1</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
</span>

しかし、上手く動作しません。


要するに、「ボタン１」で開閉できる範囲を「リスト1」だけでなく「リスト１」「リスト２」の両方に効かせたり、「ul」タグに囲まれた範囲だけでなく、他のタグも含めた範囲にも効かせたいです。


要点を得ない質問になりましたが、アドバイスをお願いします。

No.3 回答者： uedatoshi 回答日時： 2014/12/05 15:13

文法的に誤っているためにきちんと動作しないでしょう。

『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　私には良く分かりませんが、ここでとても詳しい方(ORUKAさん)が回答されるはずなのですが。みのがされているのかな

No.2 回答者： byDesign 回答日時： 2014/12/02 22:01

<span>はインライン要素なので、heightは効果がありません。

<span>の変わりに<div>（ブロック要素）に変えれば良い気がします。

なお、インライン要素の中にブロック要素を入れる事は出来ません。
<ul>はブロック要素なので、<span>の中に入れてはいけません。

この回答へのお礼

アドバイス有難うございます。
<div>は試しましたが無理でした。しかし、<ul>を使えば機能しました。
多分、<ul><ol>を<input>のすぐ下に使う時だけ機能するのかもしれません。

お礼日時：2014/12/08 07:16

No.1 回答者： Taiyonoshizuku 回答日時： 2014/12/01 15:28

まずはタグを正しく使おう。

<span>に<ul>は入れられない。

この回答へのお礼

アドバイス有難うございます。

お礼日時：2014/12/08 07:13