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

質問

http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/

上記のサイトを参考に、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

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

回答No.2

byDesign

<span>はインライン要素なので、heightは効果がありません。
<span>の変わりに<div>（ブロック要素）に変えれば良い気がします。

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

お礼

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

回答No.1

Taiyonoshizuku

まずはタグを正しく使おう。
<span>に<ul>は入れられない。

お礼

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