CSSの優先順位

CSSの優先順位について

デザインカスタマイズ(CSS)しているときに設定が反映されないときがあります。

簡単に言えばimportantを付けないと行けない場合です。色々な記述方法で優先順位が決められているのでネットで調べたことを忘れ無いように投稿しておきます。

面倒いので自分はimportant付ける事が多いです。
(※実際はダメなエンジニアの証になります!)

この記事は引用がほとんどですが、まとめを抜粋してあるものですから、詳しい解説は引用あとのリンク先を訪問してください。

後に書いたものが優先される。タイプセレクタ<classセレクタ<親要素+タイプセレクタ<idセレクタの順に優先される。

これ、どうゆうことかと言うと対象を詳しく指定しているセレクタが優先されるということなのです。

そしてこの詳しさの度合いを示すものが決められています。

(http://www.w3.org/TR/CSS21/cascade.html#specificity)
なにやら読んでみると、モゴモゴ付いてるセレクタとかにそれぞれ点数付けて、点数が高い方を優先しようぜ!ってことみたい(・ω・)

で、それぞれのセレクタの点数はこう決めるよ!ってなってます。

  • style属性がある→a値=1
  • id属性の数=b値
  • id以外の属性+擬似クラスの数=c値
  • 要素+擬似要素の数=d値

a~d値はそれぞれ、数字の千の位~一の位にあたります。
で、表にまとめました。

指定方法点数
全称セレクタ*0
タイプセレクタp1
擬似要素:first-child1
擬似クラス[type=”text”]10
classセレクタ.fugafuga10
idセレクタ#piyopiyo100
要素に直書きstyle=””1000

この表に倣って下のCSSを計算すると、
.fugafuga {
background: blue;
}
.hogehoge p {
background: red;
}

.fugafugaは10点、.hogehoge pは10点と1点で合計11点
なので、.hogehoge pが優先されるんですね、納得(∩´∀`)∩

『!importantはもう使わない!CSSの優先順位をおさらいしよう』/CREATOR BLOG
http://creator.aainc.co.jp/archives/4947 ※2019年3月30日24時(日本時間)現在での最新版を取得。

1つ星2つ星3つ星4つ星5つ星 (まだ評価がありません)
読み込み中...

関連記事一覧