質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

3077閲覧

cssの間接セレクタと擬似要素の指定方法について

KoukoMatsumoto

総合スコア41

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/01 02:05

ラジオボタンにcssを擬似要素でデザインあてをしております。
rails4 + bootstrapで開発しています。
( https://github.com/flatlogic/awesome-bootstrap-checkbox/blob/master/awesome-bootstrap-checkbox.css こちらを利用)
railsでspanエラーで該当ラジオボタンが囲まれる場合、cssの対象外になってしまいます。
以下の場合、 .radio-successを親として、 class field_with_errors以下のinput要素と、label要素の間に擬似要素のデザインが反映されるように書くにはどうすればよろしいでしょうか?
spanタグがない平常時には動作しますが、spanタグが入ると動かなくなります。
(なお、spanタグでlabelタグを囲むことはrails的に難しいです。)

railsで吐き出されるhtml(エラー発生時)

html

1<div class="radio radio-success radio-inline"> 2 <span class="field_with_errors"> 3 <input value="1" checked="checked" name="status" id="status" type="radio"> 4 </span> 5 <label class="control-label"></label> 6</div>

css

css

1.radio-success input[type="radio"] + label::after { 2 background-color: #5cb85c; 3} 4.radio-success input[type="radio"]:checked + label::before { 5 border-color: #5cb85c; 6} 7.radio-success input[type="radio"]:checked + label::after { 8 background-color: #5cb85c; 9}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

まず最初に1点。「+」は間接セレクタではなく「隣接セレクタ」です。
隣接セレクタは隣り合う兄弟要素間でしか機能しませんので、
input要素がspan要素で囲まれてしまう状態になると、
隣接セレクタを使って自動的に擬似要素を生成することは困難となりますね。

こうなるとCSSだけで何とかするのは難しそうなので、span.field_with_errorsが書き出されるタイミングで
DOMの状態を解析してlabelに専用のclassを付与するとか、何らかJSで処理を補助してやるしかないのではないかと思います。

投稿2016/06/01 02:45

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KoukoMatsumoto

2016/06/03 00:58

隣接セレクタですね!大変失礼しました。 なるほど、cssだけで今回の解決は指定方法がないですよね。お教えありがとうございます。 labelをspanの内部に来るようにして対応が無難かな・・・と感じますので、spanのとじタグをjsでいじろうと思います。本当にありがとうございます。
guest

0

過去に同様の質問があり、回答しましたので参考にしてみてください。

Selectors Level 4 の :has() で実装可能ですが、実装しているブラウザがありません。
構造を変えられないのなら JavaScript を使うしか方法がないですね。

Re: KoukoMatsumoto さん

投稿2016/06/01 23:05

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KoukoMatsumoto

2016/06/03 00:56

ありがとうございます。cssについての知識がまだまだ不足しておりまして、今後の実装では対応ができるようになる可能性があるのですね。今はまだ厳しそうですね。jsを使って操作することを検討します。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問