5. その他の規則
継承
文書ツリーの構造から、スタイル指定されたプロパティの値が親要素から子孫要素に「継承」されるものがある。 例えば、以下のbody要素に指定されたcolorプロパティは、その色がbody要素の子孫要素の色として継承される。
body { color: red }
つぎの例は、フォントの大きさを指定する"font-sizeプロパティ"によるスタイル指定である。
body { font-size: 10pt }
h1 { font-size: 120% }
このとき以下のコードについて、考えてみる。
<body>
<h1>とても<em>おおきな</em>見出し</h1>
</body>
body要素の文字の大きさが12ptであり、その値は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要素の場合のように相対値が指定されている場合には、 必要とされる絶対値に変換される。この変換後の値を「計算値」という。 例えば、以下のスタイル指定とHTMLコードの場合について考えてみる。
body { font-size: 10pt }
h1 { font-size: 120% }
<body>
<h1>とても<em>おおきな</em>見出し</h1>
</body>
h1要素の計算値は"12pt"となる。そしてem要素に継承される値は、その計算値"12pt"となる。 ただし、UAが12ptを利用できない場合には、UAが実際に利用する値(11ptかもしれないし10ptかもしれない)が使われる。 この値を「実際値」という。
スタイルシートの優先順位
スタイルシートの作成者を分類すると、つぎの3つに分類される。
- 文書作成者(作成者スタイル)
- Webページ制作者が作成するスタイルシートである。
- 利用者(ユーザースタイル)
- Webページを閲覧する人が自分用に作成したスタイルシートである。
- UA(ブラウザスタイル)
- ブラウザがデフォルトで持っているスタイルである。スタイルシートを利用しないWebページが、何も問題なく表示されるのは、 このスタイルが適用されているかである。
これら3種類のスタイルシートが同時に存在した場合は、以下の優先順位で、スタイルシートが適用される。
- 作成者スタイル
- ユーザースタイル
- ブラウザスタイル
ただし、「!important規則」を利用すると、この優先順位が変更できる。!important規則の記述は、以下の書式による。
セレクタ { プロパティ: 値 ! important }
この!important規則が指定されている場合には、つぎのような優先順位でスタイルシートが適用される。
- !important規則つきユーザースタイル
- !important規則つき作成者スタイル
- 作成者スタイル
- ユーザースタイル
- ブラウザスタイル
スタイルの競合
スタイルの指定においては、しばしば競合が発生する。例えば、つぎのような場合である。
p { color: red }
p { color: blue }
このような場合は、「後から指定されたスタイルが優先する」。 つまり、この場合、p要素の色は青が適用されることになる。
スタイルの競合は、先に述べたような単純なものばかりではない。 つぎの例を見てみよう
p.red { color: red }
p#top { color: blue }
p { color: black }
この例の場合、単純に後からのスタイルとしてしまうと、p要素はすべて黒で表示されることになってしまう。 つまり、クラスセレクタやIDセレクタ、要素の指定などにより競合が発生しているからである。 しかし、実際には各スタイルの「個別性」により、「個別性の高いスタイルを優先的に適用する」、というルールが適用される。
個別性は、以下のルールに従って計算される。
- セレクタに含まれるid属性の数(=a)
- セレクタに含まれるその他の属性および疑似クラスの数(=b)
- セレクタに含まれる要素の数(=c)
- 疑似要素は無視する
こうして計算されたa、b、cを3桁の数"abc"として個別性としている。 このとき、その3桁の数値を比べた場合に値が大きい方のスタイルを個別性が高いとしている。 つぎに個別性計算の例を示す。
* {} /* a=0 b=0 c=0 個別性= 0 */
p {} /* a=0 b=0 c=1 個別性= 1 */
p em {} /* a=0 b=0 c=2 個別性= 2 */
p em+dfn {} /* a=0 b=0 c=3 個別性= 3 */
.red {} /* a=0 b=1 c=0 個別性= 10 */
p.red {} /* a=0 b=1 c=1 個別性= 11 */
#top {} /* a=1 b=0 c=0 個別性=100 */
p#top {} /* a=1 b=0 c=1 個別性=101 */