【CSS】適用されるCSSの優先順位

【CSS】適用されるCSSの優先順位

レイアウト用のHTMLを他の方が作り、ロジック部分をさらに別の方が開発するということがあります。

返ってきたレイアウト用のHTMLを見るたびに、素敵なCSSを書いているんだと思っています。

ロジック部分の実装を進めていくにつれて、レイアウトが崩れたりという現象が起きたりします。

ロジック部分の実装をしている人もCSSが分からないわけではないため、CSSを追加して何とかしています。

それでもレイアウトが崩れている部分を、何故か私が修正することになったりします。

とりあえず、CSSを見てみると「!important」の記述がたくさん書いてありました。

デザイン担当のレイアウトから漏れたCSSをロジック担当の方が補正したもののようです。

「!important」の影響でCSSが正常に動かなくなっていたため、修正することになりました。

しかし、「!important」を追加すればするほど訳が分からなくなるのは目に見えていたため、CSSの優先順位によって対処することにしました。

自分で理解している部分は

1. タグ内に直接記述したstyle

2. idを指定したCSS

3. クラスを指定したCSS

4. タグを指定したCSS

くらいのレベルでした。

調べてみると、ちゃんと法則があるんですね。

この方の記事が分かりやすかったです。

http://creator.aainc.co.jp/archives/4947

それぞれのセレクタに点数がつけられていて、合計点数が一番高いものが適用されるとのことです。

点数が同じものであれば、後から記述したものが適用されるようです。

上のURLの法則でいけば、id指定よりクラスを11個指定する方が点数が高くなるということでしょうか。

<style>
#CSSTest1 {
   background-color: red;
}
.t0.t1.t2.t3.t4.t5.t6.t7.t8.t9.t10 {
   background-color: yellow;
}
</style>
<div id="CSSTest1" class="t0 t1 t2 t3 t4 t5 t6 t7 t8 t9 t10" style="padding: 20px;" >
  <span>背景色を確認</span>
</div>

赤く見えます。

繰り上がりはないのでしょうか。

16個のクラスでも試してみます。

<style>
#CSSTest2 {
   background-color: red;
}
.t0.t1.t2.t3.t4.t5.t6.t7.t8.t9.t10.t11.t12.t13.t14.t15 {
   background-color: yellow;
}
</style>
<div id="CSSTest2" class="t0 t1 t2 t3 t4 t5 t6 t7 t8 t9 t10 t11 t12 t13 t14 t15" style="padding: 20px;" >
  <span>背景色を確認</span>
</div>

やっぱり赤いですね。

点数で計算しているWebサイトが多いようですが、実際には点数の合計ではないようです。

高い点数のセレクタの数を比較して、同数の場合に低い点数のセレクタの数を比較するようです。

セレクタ	例	レベル
タグへの記述	style=””	A
id指定	#ID	B
クラス指定	.class	C
タグ指定	div a	D

つまり、クラス指定がどれだけあってもID指定があればそちらが優先されます。

疑似クラスもCレベルらしいので、クラス指定+疑似クラス指定の数が同じであれば後ろに書かれたものが優先されます。

結論を書けば、しっかりと指定したい場合はidで指定しましょう、となります。

少し賢くなりました。