【つまづき/CSS/実験】radioボタンとchecked疑似セレクタ

　どうも！LSSです！！

このブログでは、色々なCSSサンプルを考えては公開してきていますが、見せられる物になるまでには「このやり方で仕組みが作れそうかな？」と簡単なサンプルでテストして、うまく行きそうなら見栄えを調整して完成！としたりしています。

すると中には「一見うまく行きそうな気がしたけど、それを発展させる上で超えられない壁があり、完成に至らない」ものもあったりします^^;

これ何かに使えないかな？

■ ■ ■ ■ ■ ■ ■ ■

試験的に↑こんなものを考えてみました。

ラジオボタン（丸）をクリックすると、脇の■が選択したラジオボタン以降全て青くなります。

コード

<style>
.testr{color:red;font-size:30px;}
.testr input:checked~*{color:blue;}
</style>
<div class="testr">
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
<input name="testn" type="radio" /><span class="dummy">■</span>
</div>

※コード中、青文字の行は、全く同じ記述の繰り返しです。

やってみたかった事は、「ごく簡潔なCSSの記述で、ラジオボタンの選択位置を境にCSS効果を分ける事ができるか？」です。

このテストで作ったコードでいうと、CSSの記述はわずか２行。

.testr{color:red;font-size:30px;}
.testr input:checked~*{color:blue;}

の部分で、１行目は「クラス名testrの中身は全て（基本的に）文字色は赤、サイズは30pxとする」という指定。

２行目は「クラス名testrの中にあるもののうち、チェックが入ったinputより後ろにあるもの全て（~*）の文字色を青くする」という指定となります。
（チルダ「~」は「弟要素＝同じ親要素下にあるもので、それ自体より後ろにあるもの」を指し、「*」は「全称セレクタ＝タグ名・クラス名・IDがなんであれ全てのもの」を指します。）

実際にこの仕組みを元になにか作るとしたら、文字色を変えるだけじゃなくてもっと面白い効果を与えてみたいところですね。（今回は分かりやすい動作テストとして色変更にしています。）

ラベルにすると途端にうまくいかなくなるｗ

実際にこれを元になにか作るとしたら、小さいラジオボタンをポチポチするより、ラベルを使って見栄えよく仕上げたいところ。

そこで、inputタグと■をlabelタグで囲んでみます。

■ ■ ■ ■ ■ ■ ■ ■

コード

CSS部分は全く同じなので略
<div class="testr">
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
<label><input name="testn" type="radio" />■</label>
</div>

※コード中、青文字の行は、全く同じ記述の繰り返しです。

こうして、inputタグと■をlabelで囲んであげる事で、■をクリックするとラジオボタンにチェックが入るようになりました。

…が、こうするとそもそもの「チェックしたもの以降全て」が青くならないです。

ダメダメですｗ

原因は明らかで、「checkedとなるinputタグからみた弟要素は■だけど、共通の親要素は個々のlabelタグとなり、それ以降のinputと■は弟ではなく従兄弟になるから」ですね^^;

親戚関係で例えると、「８人のlabel兄弟に、それぞれinputと■という子がいる」状態です。

CSSセレクタは「~」や「+」で弟要素を対象にしたり、弟の子や孫までも対象にする書き方はありますが、親世代に遡る手段がありません。

どうしてもラベルを使いたかったらこう、だけども…

であれば、と、再び全てのinputタグと■を兄弟にした上で、別の方法でラベル化してみました。

■ ■ ■ ■ ■ ■ ■ ■

これなら、「チェックが入った箇所より後が全て青くなる」し、「■をクリックしてもそこにチェックが入る」の両方が成立していますね^^

…ところが、これのコードがどうなってるかと言うと…

コード

CSS部分は全く同じなので略
<div class="testr">
<input id="test1" name="testn" type="radio" /><label for="test1">■</label>
<input id="test2" name="testn" type="radio" /><label for="test2">■</label>
<input id="test3" name="testn" type="radio" /><label for="test3">■</label>
<input id="test4" name="testn" type="radio" /><label for="test4">■</label>
<input id="test5" name="testn" type="radio" /><label for="test5">■</label>
<input id="test6" name="testn" type="radio" /><label for="test6">■</label>
<input id="test7" name="testn" type="radio" /><label for="test7">■</label>
<input id="test8" name="testn" type="radio" /><label for="test8">■</label>
</div>

※コード中、青文字の行は、ほぼ同じ記述の繰り返しですが、オレンジの数字部分のみ異なります^^;

はい。「labelで囲む」方法ではどう考えても後ろ全てを兄弟にする事はできませんが、「inputにidをつけてlabelのforでID指定する」方法であれば、全てを兄弟にしながらもラベルの対象となるラジオボタンを個別に指定する事ができます。

兄弟関係に例えると、「男女男女男女男女男女…」と交互に生まれた兄弟で「長女は長男だけラブなブラコン、次女は次男だけラブなブラコン（以下略）」みたいな感じでしょうかｗ

動作としては問題ないのですが…そもそも「簡潔な書き方」を目指していたのに、IDでごちゃごちゃするという、元も子もない感じが^^;;;;;;;

もうちょっとうまい書き方があれば…

もうちょっとうまい書き方があれば、例えば、

little-strange.hatenablog.com

の記述を簡潔化できる上に、「そうそう発生させられないけど右と左をほぼ同時に押した時にページ順が狂う」という不具合も解決する事ができます。

他にも実用的な操作を作れそうな気がしてるんですけどね^^;

という、現段階では「つまづきの記録」でしたｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^