😺

[CSS]!important

2022/10/11に公開約700字

優先順を変更する書き方

  • 通常、CSSは上から順番に上書きされて適用されるので、ファイルの下の方に記載されたCSSスタイルが画面に適用される。
  • また、CSSセレクタには以下の図のように様々な種類があり、種類ごとに画面に適用される優先順位が決まっている。
コード例 セレクタ名称 適用方法
p {color: red} タイプ(要素型)セレクタ 対象のHTNLタグ全てにスタイルが適用される
.font-color {color: red} classセレクタ HTML要素にclass指定して適用
#textBox {color: red} idセレクタ 同じidを持つHTML要素に適用
  • CSSのルールではタイプセレクタよりも、HTMLタグに直接指定する方式であるclassセレクタや、idセレクタが優先的に適用される。
  • また、idセレクタはclassセレクタより優先される。
  • ところが、このようにあらかじめ決められたCSSスタイル適用の優先順位を後から変更する方法がある。これが、「!important」宣言。
  • どうしても変えたくないスタイルがあるときや、一部分だけどうしても優先させたいスタイルがあるときに、「!important」を使うと良い。

!importantを上書き(打ち消し・解除)する方法

  • 元のcssより詳細なセレクタを書くことで、そのcssが優先される。

参考

https://magazine.techacademy.jp/magazine/9424
https://wiz.ooo/tech/3320

Discussion

ログインするとコメントできます