class 内のCSSが効かない

Question

input[type="text"] {
height: 30px;
font-size: 14px;
border:1px solid #ccc;
padding: 3px;
}

.form_error {
border: 2px red solid;
}

cssに上記順番に記載して
addclassでform_errorをあてているのですが(要素の検証などで実際にclassに記載されているのを確認した)
border:1px solid #ccc;
が効いてしまいました

.form_error
を効かせるにはどうすればいいでしょうか？

CSSはあまり詳しくないので初歩的な他にチェック必要なことがあればいろいろ教えて下さい

Answer 1

cssの優先度の問題ですね！

cssを記述する際は、classやid、htmlにstyle属性で直書きするなどたくさんの方法がありますよね？？

なのでcssの書き方によって優先度（これのほうが強い！）みたいなのが設定されています！

具体的にはこのサイトを見ていただけるとわかるかもしれません。

!importantはもう使わない！CSSの優先順位をおさらいしよう

上の記事から引用しますが、

指定方法 例 ポイント
全称セレクタ * 0
タイプセレクタ p 1
擬似要素 :first-child 1
擬似クラス [type="text"] 10
classセレクタ .fugafuga 10
idセレクタ #piyopiyo 100
要素に直書き style="" 1000

このようになっています。
つまりこれを使って要素のポイントを計算し、高いほうが適応されるわかです。

githubacさんの例で言うと

input[type="text"] = input（タイプセレクタ） + [type="text"]
= 1 + 10
= 11

.form_error = .form_error(classセレクタ)
= 10

上のinput[type="text"]のほうがポイントが高いですよね？
なので、いくら.form_errorを追加しても反映されないのです。

cssが上書きされないのはこれが原因です。

もし.form_errorを適応させたい場合は、指定方法のポイントを11以上（同じ数だと下に書いてあるほうが適応されます）にすればいいのです！

おそらく
.form_error {
border: 2px red solid;
}

を
intput.form_error {
border: 2px red solid;
}

とすれば
intput.form_error = input（タイプセレクタ） + .form_error（クラスセレクタ）
= 1 + 10
= 11
で同じ数なので下に書いてあるintput.form_errorが適応されます。

長くなってしまいましたがこれで解決できれば幸いです！

失礼します！

Comments

[MasakazuFukami]

ちなみにご存知かも知れませんが、inputタグはブラウザによってデザインが違うので初期化しておいたほうがいいかもしれません。

僕はよくinput[type="text"]に
-webkit-appearance:none;
border:none;
background:transparent;
を最初に指定していてあとから好きなように上書いていく方法をとっています！

頑張ってください！

[githubac]

とても参考になりました
input.submit_form_error,select.submit_form_error {
border:2px red solid;
}
セレクトタグにも反映させたいのでこのようにしてみました！

[MasakazuFukami]

そうイッていただけて光栄です！

よく考えたらinput.form_errorにすると
input[type="radio"]やinput[type="checkbox"]などにも反映されてしまうので
input[type="text"].submit_form_error,select.submit_form_error {
border:2px red solid;
}

としたほうがいいかもしれませんね！

とりあえず解決して良かったです！

Answer 2

CSS優先順位の仕様によるものかも知れません。参考ページ

__[type="text"]と.form_error__は重要度的に等価なのでこの状態ならclassが優先されますが、__input[type="text"]__とすることで優先順位が逆転しているのでは無いでしょうか？

以下のようにすれば目的に沿った結果が得られると思います。

input[type="text"] { 
  height: 30px; 
  font-size: 14px; 
  border:1px solid #ccc; 
  padding: 3px; 
} 

input[type="text"].form_error { 
  border: 2px red solid; 
}

Comments

[hirohiro]

と思ったらinput[type="text"]としても優先度は変わらないみたいです。
単純に記述する順番を変えただけでもclassが適応されました。
.form_error {
border: 2px red solid;
}
input[type="text"] {
height: 30px;
font-size: 14px;
border:1px solid #ccc;
padding: 3px;
}

[hirohiro]

あれ？コメント修正できなくなってる？コメントの内容は間違いです。
記述を逆にしただけではclass反映されてませんでした。
投稿内容のほうが正しいみたいです。

[githubac]

コメントありがとうございました！
優先度覚えます！

Answer 3

input[type="text"]:not(.form_error) { 
  height: 30px; 
  font-size: 14px; 
  border:1px solid #ccc; 
  padding: 3px; 
} 

.form_error { 
  height: 30px; 
  font-size: 14px; 
  border: 2px red solid; 
  padding: 3px; 
} 

このようにしてみてはいかかがでしょうか。
最初のスタイルはinput[type="text"]でクラスがform_error以外のものに適用されるはずです。