CSSでは同じセレクタに何度でもプロパティを定義する事が出来ますし、また同じセレクタについて幾つもの表現が考えられる場合もあります。
さて、同じセレクタに異なるプロパティ定義が行なわれた場合、どの定義を取るべきでしょうか？
基本的には後の方を優先しますが、更に詳細度(固有性とも言う)によって優先順位が変わります。
詳細度とは、読んだ通りセレクタがどれだけ細かく書かれているかを示すもので、この値が一番大きなプロパティ定義が有効となります。
詳細度の計算方法は意外に簡単です。
この他のセレクタのうち、タイプ(要素)セレクタ, 擬似要素及び全称セレクタを除いたもの、すなわち
の個数の合計bを10倍した値
を全部足した値です。
具体的に、幾つかの例を考えて見ましょう。
アイドルをモデルにした創作キャラクタを用いた作品の一例ul li#idNameこの場合、
より、詳細度は102となります。
p q[cite]この場合、
より、詳細度は12となります。
*この場合、
より、詳細度は0となります。
詳細度により、後方で定義したプロパティ定義が効かない事がありますので充分注意して下さい。
例えば、以下のようなプロパティ定義があったとします。
dl dd {color: #000;}…dd {color: #00f;}
この場合、(HTMLでは)<dd>要素は必ず<dl>要素の直下になければならないので、どちらのプロパティ定義でも対象となるセレクタは実は全く同じものです。
しかしながら、前者はタイプ(要素)セレクタが二つで詳細度は2、一方後者はタイプ(要素)セレクタが一つのみで詳細度は1となり、前者に負ける事になります。
つまりこの場合、後者のプロパティ定義による上書きは行なわれないのです。
この他には、クラスセレクタや一意セレクタ(IDセレクタ)を用いる場合にも注意が必要です。
例えば、
p.className {…}.className {…}
と言うプロパティ定義では、前者は詳細度11、後者は詳細度10となり、この結果、<p class="className">要素においては常に前者の定義が適用される事、すなわち後者の定義で上書きされない事になります。
実際にプロパティ定義を書いていて思い通りにスタイルが当てられない場合はセレクタの詳細度が小さくなっていないか確かめてみると良いでしょう。
CSSを用いない表現、すなわち、ブラウザのデフォルトスタイルや物理要素によるスタイルなどは全て詳細度0とみなし、且つ一番初めに定義されたものと見なします。
この事により、CSSでプロパティ定義を行なえば、
いずれの場合も上書きされる事になります。
ユーザスタイルシートとは閲覧者がブラウザに設定する事で利用するスタイル定義ファイルの事です。
CSSにおいては、三種類の扱いがあります。
例えば、以下のようなユーザスタイルシートをウェブブラウザに適用させたとします。
* {font-size: 16px !important;}
このスタイルをウェブブラウザに適用した場合、全ての文字が16ピクセルズで表されるようになります。
CSSの仕様では、ウェブ制作者のスタイル定義とユーザスタイルシートでは、原則的に前者が強い事になっておりますが、ユーザスタイルシートでプロパティ定義の直後に「!important」宣言を付けた場合は、そのプロパティ定義が最優先となります。
制作者側のスタイルでも!important宣言は有効ですが、それでもユーザスタイルシートで!important宣言がついたものには勝てません。
すなわち、優先度の高い順に
!important宣言を付けたユーザスタイルシート!important宣言を付けた制作者側のスタイル定義!important宣言無しの制作者側のスタイル定義!important宣言無しのユーザスタイルシートと言う順位になります。
また、この事は閲覧者が自分の好みのスタイル定義ファイルを用意して、その中の全セレクタ全プロパティに対して!important宣言を付けたものをユーザスタイルシートとして用いる事で、ユーザ側はスタイルを完全に掌握出来てしまう事も意味します。
