いまさら聞けないCSSの優先度 – CSS Speciaficity 個別性の計算

突然ですが、問題です。

問題 1

以下コードの「何色?」のテキストは何色になるでしょう?

<style type="text/css">
* { color: black; }
p { color: green; }
#red p { color: red; }
p.blue { color: blue; }
</style>

<div id="red">
	<p class="blue">何色?</p>
</div>

正解はこちら

問題 2

以下コードの「どっちに寄ってる?」はどっちに寄ってるでしょう?

<style type="text/css">
body { width: 100%; }
div { text-align: right; }
</style>

<div align="left">どっちに寄ってる?</div>

正解はこちら

CSSの優先度の基本

後方に記述 > 前方に記述

これはもう常識ですね。後方に記述したスタイルは前方に記述したスタイルを上書きします。

制作者スタイルシート > ユーザースタイルシート > ディフォルトスタイルシート

制作者スタイルシート:
制作者がサイトをデザインするために設定するスタイルシート。

ユーザースタイルシート:
閲覧者が自分が見やすいように設定するスタイルシート。ブラウザで設定可能だがまず使わない。

デフォルトスタイルシート:
ブラウザ毎に設定されているデフォルトのスタイルシート。
最初から margin や padding が薄っすら設定されていたり、ブラウザによってフォントが違うのがそれです。このブラウザ毎の差異をなくす為に、まずはじめに CSS のリセットをかける人は多いですね。

!important

!important を宣言されたスタイルは最優先となります。
でもこれは裏技扱いです。あまり多用することはおすすめしません。

ここで、さきほどの問題1を見てみましょう。
これらのルールだけであれば「青色」になっているはずですよね。

ということで、実はもうひとつ、重要なルールがあるのです。

CSSの個別性

CSS3 selector’s specificity 個別性

count the number of ID selectors in the selector (= a)
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
count the number of type selectors and pseudo-elements in the selector (= c)
ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Examples:

* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

翻訳するとこうです。

IDセレクターの数を a とする。
クラス、疑似クラスレセクターの数を b とする。
要素、疑似要素セレクターの数を c とする。
それらを連結したものを「個別性」とする。

固別性の計算式は以下のように考えられます。

個別性 = (IDの数×100) + (クラスの数×10) + (要素の数×1)

では、問題1のセレクターの個別性を計算してみます。

#red p = 100×1 + 1×1 = 101
p.blue = 10×1 + 1×1 = 11

よって #red p のセレクター方が個別性が高く、優先度が高いということになるのです。

ちなみに、CSS2の文書では、style属性を設定している場合、個別性に 1000 を加算することと記載されています。

<p style="color: yellow;">何色?</p>

これだけで、個別性は 1000 になります。

CSS3の文書でこの記述が消去されているのは、「CSSを外部スタイルシートに分割するのはアタリマエじゃん」ってことでしょうかね?

まとめ

1. !important を宣言すると最優先される
2. 個別性が高いセレクターが優先される
3. 個別性が同じ場合、後方に記述された方が優先される
4. 制作者スタイルシート > ユーザースタイルシート > ディフォルトスタイルシート の順で優先される

コメントを残す