なぜ兄弟要素 + は便利なのか？
私は仕事で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内になんかの要素をいれたりすれば
アコーディオンとかできちゃうわけ。
ということで、小技にはもってこいの隣接要素「+」でした。