← 2.4 セレクタの構文規則 CSS総目次 2.6 前景色と背景色 →
このページでは，これまでに学習したルール以外の主な規則について説明します。
文書ツリーの構造から，スタイル指定されたプロパティの値が親要素から子孫要素に「継承」されるものがあります。 例えば，以下のbody要素に指定されたcolorプロパティは，その色がbody要素の子孫要素の色として継承されます。
body { color: red }つぎの例は，フォントの大きさを指定する"font-sizeプロパティ"によるスタイル指定です。
body { font-size: 10pt }
h1 { font-size: 120% }このとき以下のコードについて，考えてみましょう。
<body>
<h1>とても<em>おおきな</em>見出し</h1>
</body>body要素の文字の大きさが10ptであり，その値はh1要素に継承され，基準値となります。つぎにh1要素の文字の大きさは基準値の120%ですから，10ptの1.2倍である12ptが，h1要素の文字の大きさとなります。
ここでem要素の文字の大きさは指定されていませんから，親要素であるh1要素の文字の大きさを継承します。このとき継承するのは，1.2倍と計算された値である12ptです。つまり，"120%"という，「パーセント値は継承されない」ことに注意してください。
プロパティの値に指定されたものを「指定値」と呼びます。この指定値には絶対値や相対値を指定できるものがあります。以下の例では，h1要素のフォントの大きさに絶対値"24pt"，h2要素のフォントの大きさに相対値"120%"を指定しています。
h1 { font-size: 24pt }
h2 { font-size: 120% }この指定値が絶対値の場合は，その値がそのまま使用されますが，h2要素の場合のように相対値が指定されている場合には，必要とされる絶対値に変換されます。この変換後の値を「計算値」と呼びます。例えば，以下のスタイル指定とXHTMLコードの場合について考えてみましょう。
body { font-size: 10pt }
h1 { font-size: 120% }<body>
<h1>とても<em>おおきな</em>見出し</h1>
</body>body要素の指定値"10pt"を基準として，h1要素の計算値は"12pt"となります。そしてパーセント値は継承されませんから，em要素に継承される値は，そのh1要素の計算値"12pt"となります。ただし，UAが12ptを利用できない場合には，UAが実際に利用する値（11ptかもしれないし10ptかもしれない）が使われることになります。この値のことを「実際値」と呼びます。
スタイルシートの作成者を分類すると，つぎの３種類に分類されます。
これら３種類のスタイルシートが同時に存在した場合は，以下の優先順位で，スタイルシートが適用されます。
ただし，「!important規則」を利用すると，この優先順位を変更することができます。!important規則の記述は，以下の書式で記述します。
セレクタ { プロパティ: 値 ! important }この!important規則が指定されている場合には，つぎのような優先順位でスタイルシートが適用されます。
スタイルの指定においては，しばしば競合が発生する場合があります。例えば，つぎのような場合です。
p { color: red }
p { color: blue }このような場合は，「後から指定されたスタイルが優先します」。つまり，この場合，p要素の色は青が適用されることになります。
スタイルの競合は，先に述べたような単純なものばかりではありません。つぎの例を見てみましょう。
p.red { color: red }
p#top { color: blue }この例の場合，クラスセレクタとIDセレクタを同時に指定した場合，何色で表示されるのでしょうか。このような状態を「競合」が発生していると言います。競合している場合には各スタイルの「個別性」により，「個別性の高いスタイルを優先的に適用する」，というルールが適用され，それぞれどのスタイルを適用するかが異なります。
個別性は，以下のルールに従って計算されます。
この a，b，c，dを４桁の数"abcd"として個別性としています。このとき，その４桁の数値を比べた場合に値が大きい方のスタイルを個別性が高いとして，優先順位が高くなります。つぎに個別性計算の例を示します。
* {} /* a=0 b=0 c=0 d=0 -> 個別性 = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> 個別性 = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> 個別性 = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 個別性 = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 個別性 = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 個別性 = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 個別性 = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> 個別性 = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> 個別性 = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> 個別性 = 1,0,0,0 */この個別性の計算によれば，先の例の場合，
p.red { color: red }
p#top { color: blue }それぞれの個別計算は，以下のようになります。
p.red {} /* a=0 b=0 c=1 d=1 -> 個別性 = 0011
p#top {} /* a=0 b=1 c=0 d=1 -> 個別性 = 0101つまり，クラスセレクタとIDセレクタを同時に指定した場合は，IDセレクタの方が個別性が高くなるので，青色で表示されることになります。