隣接セレクタが効かないときに確認する箇所の備忘録。
【CSS】隣接セレクタが効かないときの確認箇所
別記事でも紹介した input と label で作るカスタムを作る際にハマって無駄に時間を溶かしたので、同じように困ってる人と将来の自分へ向けて残しておきます。
隣接セレクタが効かないときはHTMLの順番かもしれないよ
見出しのまんまですが、隣接セレクタが効かない原因は CSS ではなくて HTML側の記述に問題があるかもしれません。
隣接セレクタは要素と要素の間に『+』を記述します。
h1 + p {
font-size: 16px;
}↑のような感じです。
で、勘違いしてはいけないのが、隣接セレクタという名前なので隣り合っている全ての要素にスタイルを当てられそうな気がしちゃいますが、実際は隣接した次の要素のみが対象です。注意。
developer.mozilla.orgで、今回なにをやらかしたかというと、前述の通りチェックボックスをCSSでカスタマイズしようとしたときです。
input と label でカスタムする際は、input 要素が『チェックされているかどうか』でスタイルを分けるのですが、その際の必要な記述として
input[type=checkbox]:checked + .hoge（labelのクラス） {
hoge: hoge;
}のように、『チェックが入った場合の.hoge』を指定する際に隣接セレクタを使うのです。
もうお気づきだと思いますが、HTML の順番が間違っていたのです。
<!--私の間違い↓-->
<label for="" class=""></label>
<input type="checkbox" id="" value="">
<!--正しい↓-->
<input type="checkbox" id="" value="">
<label for="" class=""></label>原因はHTML側にあるのに私ときたらCSSばかりに目を向けて１時間溶かしてしまいました笑
まとめ
というわけで、隣接セレクタが効かない原因はCSSではなくてHTMLかもよって話でした。
