詳細度 (ウェブデザイン技能検定用語集)

詳細度

CSS のセレクタ優先順位を定めたものを詳細度といいます。

※ 英語表記　specificity

具体的には、3段階の優先度があり、

1段階(弱い）：　型名（タグそのもの　例：div）、疑似要素（例：　::after)

2段階(普通)：　クラス指定（例：　.example）、属性指定（例： [type=input])、疑似クラス (例えば :hover)

3段階(強い)：　ID指定（例：　#example)

なっています。

CSSでセレクタ記述する際にそれらのどれを用いたか、いくつ用いたかで優先順位が決まります。

これらを3桁の数字で表す場合があります。

百の位を　上記3段階の個数

十の位を　上記2段階の個数

一の位を　上記1段階の個数

具体例としては、

div ul li.example の場合、

型指定が３つ、

クラス指定が１つなので、

013　となります。

※詳細度をカウントするシステムを公開しております。ぜひご利用下さい。