カスケード処理、値の継承

値の継承

プロパティの中には、その値が自分の子要素に継承されるものがあります。たとえば、body要素に文字色(colorプロパティ)を指定すると、特に文字色を指定していない子要素は、body要素の文字色の値を継承して文字を同じ色で表示します。各プロパティが値を継承するかどうかは、各プロパティの「継承」の項目を参照してください。

継承される値が[%][em]などの相対値である場合は、相対値がそのまま継承されるのではなく、相対値として計算された算出値が継承されます。

inheritという値

pageプロパティを除くすべてのプロパティには、「inherit」という値を指定することができます。これは、通常は値を継承しない要素であっても、強制的に値を継承させることができるキーワードです。

カスケード処理

スタイルシートには、作成者、ユーザ、ブラウザ[UA]といった異なる3つの出所があり、三者から同時に同じスタイルシートが適用される可能性があります。スタイルシートには、このような競合を避けるための優先度(カスケード処理の順序)が定められています。


文書作成者のスタイルシート

↑優先　(ただし｢!important｣が同時に指定されているときは、ユーザを優先)

ユーザのスタイルシート

↑優先

ブラウザのデフォルトスタイルシート


body {

color: black !important;

background: white !important;

}

最重要宣言「!important」のある宣言は通常の宣言より優先されます。

カスケード処理の順序は、一般的にはより細かい部分で指定しているスタイルが優先されます。たとえば、要素に対して指定したスタイルよりはクラスに対して指定したスタイル、クラスに対して指定したスタイルよりはIDで指定したスタイルが優先されます。もし、それでも競合してしまう場合には、より後に記述されたスタイルが優先されます。

セレクタの詳細度の計算

セレクタの詳細度は以下の様に計算します。詳細度が高いほど優先度が高くなります。

セレクタ内のID属性を数え上げ、その数を「a」とする。

他の属性及び擬似クラスを数え上げ、その数を「b」とする。

要素名を数え上げ、その数を「c」とする。

擬似要素は無視する。

この3つの数字を「abc」と並べて詳細度とします。ただし十分大きな基数の記進法で考えるものとします。

いくつか例を挙げると


*             {}   /* a=0 b=0 c=0 -> 詳細度 = 0 */

LI            {}   /* a=0 b=0 c=1 -> 詳細度 = 1 */

UL LI         {}   /* a=0 b=0 c=2 -> 詳細度 = 2 */

UL OL+LI      {}   /* a=0 b=0 c=3 -> 詳細度 = 3 */

H1 + *[REL=up]{}   /* a=0 b=1 c=1 -> 詳細度 = 11 */

UL OL LI.red  {}   /* a=0 b=1 c=3 -> 詳細度 = 13 */ 

LI.red.level  {}   /* a=0 b=2 c=1 -> 詳細度 = 21 */

#x34y         {}   /* a=1 b=0 c=0 -> 詳細度 = 100 */

HTML、XHTMLでは、要素のstyle属性を用いて属性値としてスタイルシートを記述することができます。この場合、属性値として記述された規則には対応するセレクタが存在しませんが、これらの規則はIDセレクタを持つものとして(すなわち詳細度100として)考えます。すべての規則の後にstyle属性が記述されているのならばカスケード処理の順序によって、その記述は優先されます。

style属性による記述はIDセレクタと同じ詳細度100と考えます。


<h1 style="color:blue">あいさつ</h1>

CSS以外による体裁指定の詳細度

HTMLでのfont要素やalign属性などによる体裁指定は、詳細度を0として考えます。