CSSの詳細度について

詳細度とは

CSSには詳細度というものがあります。詳細度とはCSSの強さを決めるためのものです。
CSSのセレクターをより詳細に記述することで、セレクターに記述されたCSSが他のセレクターよりも優先されます。

例えば上のCSSでは、#container .textセレクターの方が、.textセレクターよりもより詳細にセレクターが記述されていることで詳細度が大きくなります。つまり、color: blueがcolor: redよりも優先され、結果として青色の文字が表示されます。

詳細度の計算方法

詳細度は、セレクター内に含まれる3つのカテゴリー（IDの数、クラス名の数、タグ名などの）要素の数に基づいて計算されます。

一般的な詳細度の計算方法は次のとおりです。

• IDセレクター ： IDセレクターが使われている場合（例：#container）は、詳細度は(1,0,0)になる。

• クラスセレクターや属性セレクター、疑似クラスセレクター ：クラス、属性、および擬似クラスセレクターが使われている場合（例：.text、[type="submit"]、:hover）は、詳細度は(0,1,0)になる。

• 要素セレクターや疑似要素セレクター ： 要素および擬似要素セレクターが使用されている場合（例：p、::before）は、詳細度は(0,0,1)になる。

左から見て数値が大きいほど、そのCSSの優先度が高いです。

これを踏まえると、例えば、#container .textというセレクターでは、IDセレクターが1つ、クラスセレクターが1つ含まれています。
したがって、詳細度は（1,1,0）となります。

一方、.textというセレクターでは、クラスセレクターが1つのみ含まれているため、詳細度は（0,1,0）となります。

詳細度が高いセレクターのスタイルが優先されるため、#container .textセレクターのスタイルが適用されます。