なぜ兄弟要素 + は便利なのか？

私は仕事でWEBシステム作っています。
なので基本的にデータは可変だし、
タグについてもシステム側からはき出されたりするので、色々想定して作らないといけない。

そういう時に僕は隣接する兄弟要素を指し示してくれる「+」をよく使います。

CSSを始めたばっかりの時は、
「なんやこれ！使い道なくね？」とか思ってたけど、
今はこれがないと生きていけない体になっちゃいました。

正味、可変じゃなくて固定されたレイアウトだとあんま「+」使う意味ない。

でも仕事していると、よくこんなことがあるのよ。

・ユーザがタイトルを入力しないとそのタグごと無くなる
・チェック入れたら、どこかに新たにタグが表示される
・何かの拍子にモードチェンジし、その時は親wrapperにそれ用のclassがつく

そんなフレキシブルMAXなシステムに対応するために、この「+」を使います。

例えば

　<div>
　　　<h1>タイトル</h1>
　　　<h2>サブタイトル</h1>
　　　<p>これは文章じゃ</h1>
　</div>

みたいなタグがあったとします。

当然margin入れるときはこう書きます。
※他にも書き方はあります。

兄弟要素 + を使わない場合

　h2 { margin-top: 8px;}
　h3 { margin-top: 15px;}

でもこれじゃ、システム側でh1のタイトルの入力がなかった場合、
h1のタグ自体なくなっちゃったら...
h2の上に不要なmargin-topがでる。

いやいや！それじゃh1にmargin-bottom入れればいんじゃね？って思うけど、
h2もh3も入力がなかった場合に、h2もh3も無くなるから
またまたh1の下に余分なmargin-bottomができちゃうでしょ？

なので、そういう時に「+」使うんですよ。こうします。

　h1 + h2 { margin-top: 8px;}
　h1 + h3 { margin-top: 15px;}
　h2 + h3 { margin-top: 15px;}

「h1の次の兄弟要素のh2にマージン入れましょ。」
「h1の次の兄弟要素のh3にマージン入れましょ。」
「h2の次の兄弟要素のh3にマージン入れましょ。」

だからこういうことよね、、、基本的にみんなmarginなし！
そうなる場合だけCSSを入れることができる。便利！

「+」を使うとこんなこともできちゃう。

チェックボックスをスイッチをにして、
要素の表示・非表示の切り替えをCSSのみで作れます。

　<input type="checkbox">
　<div class="area">表示・非表示切り替えエリア</div>

　.area { display: none;}
　[type="checkbox"]:checked + .area {
　　display: block;
　}

めっちゃ簡単にかいたけど、
表示・非表示切り替えエリアのclassを.areaとしてまずは非表示にします。

その次の記述がミソで
[type="checkbox"]:checked + .area
↑チェックが入ったチェックボックスの次にある要素、
この場合.areaですね。

これで.areaのdisplayが上書きされて、block要素となり、表示されます。
チェックボタンを非表示にして、仮でボタンを作ることもできます。

　<label for="showButton">ボタン</label>
　<input type="checkbox" id="showButton">
　<div class="area">表示・非表示切り替えエリア</div>

　.area { display: none;}
　[type="checkbox"] {display: none;}
　[type="checkbox"]:checked + .area {
　　display: block;
　}

要はlabelタグのfor=""とcheckboxのid=""をつなげればいい。
後はcheckboxのdisplayを消せばいい。
labelがcheckboxの代わりをしてくれるわけです。

あとは好きにボタン装飾するなり、area内になんかの要素をいれたりすれば
アコーディオンとかできちゃうわけ。

ということで、小技にはもってこいの隣接要素「+」でした。