input[type=radio]:checkedが効かない

input type="radio"でチェックされたか否かの判定で擬似要素のtransform(xdeg)のxdegについて
変化をさせたいと考えております。

そこで以下のようにinput[type=radio]:checked を使用し、チェックされているか否かのセレクタを利用してtransform(xdeg)を変化させようとしたところ、２つ目に提示したcssが効きません。擬似要素のdefaultのcssであるtransform: translateY(-80px);は適切に適用されています。

この原因と解決策についてアドバイスをいただけますでしょうか？

よろしくお願い申し上げます。

html
1<div class="middle_wrapper">
2  <div class="coffee_neutral cof_wrapper">
3    <input type="radio" class="cof_radio" name="radio" value="cof">
4    <div class="cof_box coffee_box">
5      <span class="coffee_select cof_select">hoge</span>
6      <input type="hidden" id="select_A" name="" value="fuga">
7    </div>
8  </div>
9</div>

css
1.cof_select:before {
2  content: '\f0f4';
3  font-size: 1.2em;
4  font-family: FontAwesome;
5  display: block;
6  transform: translateY(-80px);
7  transition: all 300ms ease-in-out;
8}
9
10.middle_wrapper input[type=radio]:checked + .cof_box span:before {
11  transform: translateY(0px);
12}

行動規範の内容に同意します

回答1件

ベストアンサー

動くサンプル：https://jsfiddle.net/c0jexfpg/

提示されたコードで問題なく動いています。

HTMLの構造が間違っている
他のCSSが有ってそれが邪魔している
コードを書いている環境と見ている環境がそもそも違う（アップロード失敗やキャッシュなどを含む）

投稿2019/08/12 05:59

kei344

総合スコア69625

SugiuraY

2019/08/12 11:41

コメントありがとうございます。返信が遅くなり誠に申し訳ございません。仰って頂いたポイントをいろいろ試していたのですが、おそらくhtmkの構造の誤りであると考えて、できるだけ簡素化して、いじっていたのですが、やはり単純な構造にしても動いてくれませんでした。。 https://jsfiddle.net/3aLytqpz/5/ セレクタの指定方法に問題があるのでしょうか？重ねての質問で誠に申し訳ございません。。ご教示いただけたら嬉しいです。。よろしくお願い申し上げます。

kei344

2019/08/12 11:45

構造が変わっているし、 input[type=radio]:checked + .cof_text:before ではラジオボタンの直後の兄弟要素に.cof_textが無いと動きません。

SugiuraY

2019/08/12 12:05

申し訳ございません、バージョンの誤りで以下の通りに指定しております input[type=radio]:checked .cof_text:before https://jsfiddle.net/3aLytqpz/6/ また、構造についてもご指摘をいただいて、実際の自分の構築しているhtmlでは動作しないため、実際に実際の構造で記載をしました、はじめに提示した上述はポイントを絞るために、簡便にしたつもりが結果的に構造の問題で混乱を招いてしまい、深くお詫びさせていただきます。

kei344

2019/08/12 12:13

> input[type=radio]:checked .cof_text:before 上記指定は「ラジオボタンの内包要素（そんな物は無い）にある」「.cof_text」を指定しています。【CSSのセレクタチートシート | webliker】 https://webliker.info/css-selector-cheat-sheet/ > 簡便にしたつもりが問題の切り分けってそもそも難しいですが、全体が出せない場合は問題の再現できるコードを提示するようにされたほうがよいです。

SugiuraY

2019/08/12 12:32

コメントありがとうございます。切り分けについては訓練しますが、不慣れなうちは、できるだけありのままの形でご提示するようにいたします。 1) 因みに回答をくださる方の視点では、どれだけボリュームが多くてもやはり再現性や切り分けの観点からそのままに近い形で提示した方が、ベターなのでしょうか？（あまりにも多すぎるコードの場合には、見ていただくのも申し訳がないと思ったりしていたのですが、結果的に切り分けができていない方がご迷惑な気もしている次第です。） 2) また、本件結果的にご指摘いただいて確認する限り、セレクタの問題であることがわかりました。以下ののようinput要素を動かし兄弟要素とした上で +で繋げることで解決することができました。 https://jsfiddle.net/n520m9by/1/ 最後のご質問になるのですが、もともとの誤ったセレクタの使い方のようにcheckedされるinput type="radio"と適用したcssの要素が遠く離れている場合、今の所css(JQueryもですが)の:chekedのような擬似クラスのおいては絶対的に指定することはできないと言う理解であっていますでしょうか？（チートシートも一通り拝見したのですが）基本的にはこのようなケースではinput type="radio"の要素の位置から相対的に指定（例えば隣接する兄弟なら+、直接の子要素なら >のような意味で相対的）するしかないという意味合いでございます。何卒、よろしくお願い申しげます。

kei344

2019/08/12 12:47

> 1) 確かに、「全部」提示されても読む気にならない、ということはあります。なので切り出して欲しいところではありますが、「問題の再現」ができない部分を切り出されてしまっても対処できません。なので、切り出した部分と、全文と両方あるほうが良いとは思います。もちろん「問題を再現できる一番小さなコード」を作成してもらうのがベストです。（というかここの回答者のほとんどは自分自身の仕事のコードでも回答コードでも「問題を再現できる一番小さなコード」を作成して検証されていると思います） > "radio"と適用したcssの要素が遠く離れている場合…（中略）…指定することはできない HTMLの構造によります。例えば"radio"がbody直下最初の要素で、その次のdiv要素に残りの要素が全てあるような場合はどれだけ遠くても指定は可能です。相対位置でしか指定できない、というのはその通りです。しかも、"radio"が書かれた以降の兄弟要素（及びその配下の要素）にしか指定できません。 > 直接の子要素なら例示だとは思いますが、"radio"には子要素がありません。なので、「+」「~」のどちらかのセレクタのみ使用可能です。

SugiuraY

2019/08/12 14:31

kei344様最後までお付き合いいただき、本当にありがとうございます。自分の至らない部分も省みることができました。また、ご回答者の考え方もうかがい知ることができてとてもよかったです。今後質問させていただく機会があれば、「問題を再現できる一番小さなコード」をより意識してまいります。改めて御礼申し上げます。よろしくお願い申し上げます。

行動規範の内容に同意します