CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator

CSSのセレクタのポイントをビジュアル化して、優先順位が簡単に分かるオンラインツールを紹介します。

サイトのキャプチャ

Specificity Calculator

CSSの優先順位とは、例えば同じセレクタでスタイルを定義した場合、後に記述したものが適用されます。これは「後に記述したものが優先される」ということです。

例:

<h1 class="title">見出し</h1>

h1の見出しに、同じセレクタで異なるスタイルを適用してみます。

.title{
	color:red;
}

.title{
	color:blue;
}

この例では、後に記述した「color:blue;」が適用されます。
いわゆる、上書き状態です。

また、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。
ここで紹介する「Specificity Calculator」では、セレクタを入力するだけで、そのポイントをビジュアル化して優先順位が簡単に分かるようになります。

例:

h1.title{
	color:red;
}

.title{
	color:blue;
}

この例では「h1.title」のポイントが高いため、「color:red;」が適用されます。

Specificity Calculatorの使い方は簡単です。
セレクタを黒いエリアに入力するだけで、すぐに優先順位のポイントが表示されます。

サイトのキャプチャ

「h1.title」と「.title」のポイント

ポイントは4桁の数字に考え、大きい数字ほど優先順位が高くなります。

h1.title
0011
.title
0010

「h1.title」の方が数字が大きいため、優先されます。

4桁は、左から順に下記のようになります。

1000の位
インラインスタイル
100の位
id
10の位
class, 擬似class
1の位
エレメント、擬似エレメント

例えば、「h1.title」にエレメントを加えると、更に優先順位が高くなります。

サイトのキャプチャ

「div h1.title」と「h1.title」のポイント

top of page

©2017 coliss