コラム

こんにちは。しまこです。
今回はセレクタの優先順位についてお話します。

複数箇所でCSSを指定すると、競合してしまってうまくいかないことがよくあります。
CSSが効かないからと、「!important」を使ってしまうことも。
セレクタの優先順位を知っておくと、「!important」を使用したり記述がややこしくなるのを避けることができます。

セレクタの種類

IDセレクタ

#idの様なid単位のセレクタ

クラスセレクタ

.styleの様な各要素のclass単位のセレクタ

属性セレクタ

[id=”samplestyle”]など

疑似セレクタ

li:first-childなど

タイプセレクタ

pやdivの様な要素単位のもの

!importantについて

通常の優先順位に関係なく、優先的に適応されます。
予期せずCSSが適応されないトラブルも起こり得るので
本当にどうしようもない時に取っておくのが良いと思います。

CSSセレクタの優先度の計算式

セレクタには優先度があり、点数を計算して
得点の高いものが適用されます。

■style属性→1.0.0.0点
■ID→0.1.0.0点
■クラス→0.0.1.0点
■属性セレクタ→0.0.1.0点
■疑似クラス→0.0.1.0点
■要素名→0.0.0.1点
■擬似要素→0.0.0.1点
■全称セレクタ→0.0.0.0点

CSSの検証

CSSがうまく反映されていない時、どのCSSが優先されているか確認するのに
ブラウザの検証機能がとても便利です。

セレクタのポイントを比較してくれるオンラインツール

Specificity Calculator
CSSの優先順位をチェックできるツールです。
ポイント制になっているのでわかりやすいです。

ルールさえ理解すればCSSの記述もシンプルになり
トラブルも減るのではないでしょうか。