CSS の詳細度階層：知っておくべきこと - TechRepublic

CSSルールが期待通りに動作せず
、コードが正しく記述されているように見える場合、あるいは
スタイルを適用しようとしている要素がどのブラウザでも適用されない場合、CSSルールはCSS
詳細度の競合（CSS specificity conflict）の問題を抱えています。この概念はWeb開発者の世界では目新しいものではありませんが、それでもおそらく最も理解しにくいものの1つです。 ここでは、CSSの詳細度の階層構造について、理解しやすいように
説明し 、いくつかの例を挙げていきます。

CSSの詳細度階層

W3Cが規定する詳細度は、
まずCSSセレクタとルールを4つのカテゴリ
またはグループに分類し、各グループに重み付けされた値を割り当てることで算出されます。
図解しやすいように、
左側の最初のカテゴリグループの詳細度は最も高く、グループが左から
右に移動するにつれて詳細度は減少し、最後のグループの詳細度は最も低くなります。詳細度は セレクタの
形式のみに基づいて算出されます。

各CSSルールについて、4つの数字ABCDを連結し、
表記上の簡略化された大基数体系を用いて
詳細度を決定します。セレクタの4つのグループと、それに対応する詳細度
値およびオプションの値式を以下に示します。

W3C はセレクタの詳細度を次のように計算します。

• A. 要素にインライン スタイル ルールがあるかどうかをカウントし、値 1,0,0,0 または A=1、B=0、C=0、D=0、または x,0,0,0 を適用します。
• B. セレクター内の ID 属性の数を数え、それぞれに値 0,1,0,0 を適用するか、A=0、B=1、C=0、D=0、または 0,x,0,0 を適用します。
• C. セレクター内のクラス、疑似クラス、およびその他の属性の数を数え、それぞれに値 0,0,1,0 を適用するか、A=0、B=0、C=1、D=0 または 0,0,x,0 を適用します。
• D. セレクター内の要素名と疑似要素の数を数え、それぞれに値 0,0,0,1 を適用するか、A=0、B=0、C=0、D=1 または 0,0,0,x を適用します。

図 Aのグラフィックは、芸術的自由と、この件に関する Chris Coyier の投稿からインスピレーションを得て、CSS セレクターの
グループ化と詳細度を示し、関連する配置、関連する
文字図、各セレクター タイプの例、セレクター タイプ、
詳細度スケールにおける位置を示しています。

図A

CSS の詳細度の性質上
、インラインスタイル属性は常に優先され、他の
属性や要素を上書きします。ID 属性は常にクラス属性や
疑似クラス属性よりも優先されます。実際、任意の数のクラス属性は、
1 つの ID によって常に上書きされます。つまり、詳細度の高いセレクタは、
詳細度の低いセレクタよりも常に優先されます。

CSSの詳細度の例

以下の例は、
各 CSS セレクターと詳細度の実際の動作を説明するのに役立ちます。

インラインスタイル内の色属性は外部
CSSの段落要素を上書きします

緑色の影付きの段落コンテンツのインライン スタイルの色属性は、次
のコード スニペットに示されています。

<p style="color:#060;">

このインラインスタイルの例は、詳細度値が 1,0,0,0 であり、その段落要素内の
color 属性に適用されているローカルまたは外部 CSS をオーバーライドします
。color 属性を持つ外部 CSS 内に段落要素スタイルを配置しても
、その段落では常に緑色のままになります
。要素の詳細度値が 0,0,0,1 であるため、
この場合は段落要素は詳細度値が 1,0,0,0 のインラインスタイルによってオーバーライドされます
。

上記の例では、サンプル段落にインラインスタイルを設定し
、外部スタイルシート内のすべての段落要素に青色を適用しました。外部CSSのコードスニペットと、 インラインスタイルと段落要素
の両方の結果出力は、 Chromeブラウザで表示した図Bに示されています 。

図B

p { 色: #06F; }

ID属性はクラス属性をオーバーライドします

この例では、サンプルの <section> コンテナに適用されたID属性が、
外部CSSファイルからリンクされたクラス属性をオーバーライドする方法を示します
。以下の「サイドバー」用の2つのCSSコードスニペットは、
それぞれ明確に異なるスタイルを提供しています。

ID:

#sidebarID { float: left; width: 50%; background:#0FC; padding-bottom: 5px;}

クラス: 

.sidebar1 { float: left; 幅: 25%; 背景: #CCC; パディング下部: 10px; }

<section> の次の HTML コード スニペットが
下に表示されます。

<セクション class="サイドバー1" id="サイドバーID">

上記のHTMLコードのように、セクションにクラスとIDの両方を適用すると
、IDセレクタの詳細度が
0,1,0,0であり、クラスセレクタの値が0,0,1,0であるため、IDセレクタが優先されます。Chromeブラウザに表示される結果の<section>は、図C
に示すように、オーバーライドする IDセレクタが適用されています。

図C

ID が適用されず、クラスが
<section> 内で単独で呼び出されると、Chrome ブラウザに表示される結果は次のようになります
(図 D )。

図D

CSSの詳細度の計算例

デモンストレーションとして、CSSセレクターの
組み合わせと、その結果得られる詳細度の例をいくつか挙げます。これは、
特定の状況やシーケンスにおいて値がどのように適用されるかを理解するのに役立ちます。これらのサンプルCSSセレクターは、
CSS詳細度計算ツールで確認できます。

html > body – 詳細度値 0,0,0,2 として表される 2 つの要素。

#body — 0,1,0,0 の詳細度値として表される 1 つの ID。

#body.frontpage.default — 1 つの ID と 2 つのクラス。詳細度値は 0、1、2、0 として表されます。

iv#main-content a:focus — 1 つの ID、1 つのクラス、および 0、1、1、2 として表される 2 つの要素。

.w3c.js.flexbox.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths — 0,0,42,0 として表される 42 クラス。

CSSの詳細ルールに関する追加リソース

• CSS 特定性計算機:
  計算機には インライン スタイル を含めることができないため制限がありますが、コードから CSS スニペットを貼り付けて
  計算機を実行し、
  結果の計算方法の詳細を表示するオプションを使用して出力を表示できます。
• セレクタの詳細度の計算: これは、CSS セレクタの詳細度を計算するための W3C 仕様です
  。
• CSS の特異性: このサイトでは、さまざまなセレクターの組み合わせを表すアイコン、
  凡例、About セクション、CSS Dev
  Conference へのリンクを含む独自のインフォグラフィックを提供しています。