「+」で次に来るタグを操作するCSSの記述方法は?

質問

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/

上記のアドレスで、下記の説明がされています。
「今回は、ulの表示・非表示でアコーディオンの役目をさせていますが、divなど他のタグに変えても出来ます、+を利用して次に来るタグが対象になっています」

input[type="checkbox"].on-off:checked + ul{height: 200px;}
この様に記述すれば、「inputタグ」の次に来るタグ、すなわち「ulタグ」を、「+」によって操作できると言う説明です。

それでは、「次に来るタグ以外のタグ」は操作する方法はどうするのですか？

input[type="checkbox"].on-off:checked + .test ul{height: 200px;}
上記の様に記述すれば、<div class="test">～</div>を操作できますか？

回答No.1

ORUKA1951

変なサイトを見ないこと。
「+を利用して次に来るタグが対象になっています」違います。それも初歩的な嘘。
+ある要素に続く要素を示す隣接セレクタと呼ばれるものです。
　タグはその要素を示すマークアップであって、要素自体を示すものではない。これはHTMLのようなマークアップ言語を扱うときの基本中の基本。
input[type="checkbox"].on-off:checked + ul{
　HTMLが糞だからセレクタの書き方も糞になる。on-offなんてクラス名はつけないでしょう。classは、要素では文書構造が示しきれないときに、文書構造を補完するためにつける。
input[type="checkbox"].on-off:checked + .test ul{
　CSS2以降は基点セレクタを書くこと。上記(.test)の様になくても、そこに全称セレクタが省略してあると判断して、*.testと解釈はしてくれるけど。

　まず、CSS2.1の
5.セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
をマスターしましょう。

＞上記の様に記述すれば、<div class="test">～</div>を操作できますか？
　前後の文書構造が分からないので答える事は不可能です。
　ただ、input要素は行内要素ですから、その直後にdiv要素が閉じられもせず繰ることはありえません。
　form　　　　　　　<form>
　|-- p　　　　　　　　<p>
　|　|--input　　　　　　<input>
　|--div　　　　　　　 </p>
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　<ul>
のはずですから、HTMLが正しければそのような書き方にはならないはずです。
もちろん、
input[type="checkbox"].on-off:checked + ul{
にもね。