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」のポイント