スタイルの優先順位
スタイルが競合した場合優先順位があります
- スタイル適用順を決定する要素
- CSSの提供元による優先順位
- 個別性による優先順位
- 記述順位による優先順位
- !important ルール
CSSはカスケード (cascade) 処理と呼ばれる一定のルールに則って、スタイルの優先順位を決めています。
スタイルの適用順位は以下の4つの項目を元に、Web ブラウザによって決められます。
CSSの提供元による優先順位
下記の順に優先されます。
- Web ページ制作者が作成した制作者スタイルシート
- Web ブラウザのユーザーが作成したユーザースタイルシート
- Web ブラウザが標準で適用するデフォルト(またはブラウザ)スタイルシート
個別性による優先順位
個別性 (Specificity) の高いものが優先されます。
より範囲の狭い部分に設定したスタイルが優先されるようになっています。下記はその順です。
- id セレクタ
- class セレクタ
- 要素
- * (全称セレクタ)
たとえば、下記のような競合スタイルがある場合は、class セレクタ test を指定していて個別性が高いとみなされる style1 が優先的に適用され、結果「個別性優先」は赤色文字で表示されます。
- CSSソース:
- /* style 1 */
- #sample p.test span { color : red ; }
- /* style 2 */
- #sample p span { color : blue ; }
- XHTMLソース:
- <div id="sample">
- <p class="test"><span>個別性優先</span></p>
- </div>
-
- スタイルシートの設定方法での優先順位もあり、次の順になっています。
- 特定の箇所だけに適用する(特定の要素内で設定)
- 1つのページのみに適用する( head 要素内で設定)
- 複数のページに適用する(外部ファイルで設定)
-
記述順位による優先順位
あとから出てきたものが優先されます。
!important ルール
!important 宣言のついたスタイルが優先されます。
!important 宣言によって提供元による優先順位が入れ替わります。
- ユーザースタイルシート( !important 宣言付き)
- 制作者スタイルシート( !important 宣言付き)
- 制作者スタイルシート
- ユーザースタイルシート
- デフォルトスタイルシート
上で示したように、!important 宣言は、ユーザースタイルシートの優先度を上げる効果もあるようです。
また、制作者スタイルシート内でも一時的に任意のスタイルを適用したい場合などにも有効です。以下はその例です。
- CSSソース:
- div.html p.note {color : black ; }
- div.css p.note {color : blue ; }
- div.source p.note {color : yellow ; }
- XHTMLソース:
- <div class="html"><p class="note">一時的スタイル適用の!important宣言</p></div>
- <div class="css"><p class="note">一時的スタイル適用の!important宣言</p></div>
- <div class="source"><p class="note">一時的スタイル適用の!important宣言</p></div>
- ブラウザでの見え方 ⇒ css07_sample02.html
-
- ここで、note という class 属性値をもつ p 要素内のテキストを一時的に赤色にするために、!important 宣言を含むスタイルを追加します。
- CSSソース:
- div.html p.note {color : black ; }
- div.css p.note {color : blue ; }
- div.source p.note {color : yellow ; }
- p.note {color : red !important ; }
このように全てのスタイルを書き換えるのは非効率的なので、!important 宣言を含むスタイルを一時的に追加すれば、一行加えるだけで済み、元にもどすのも簡単にできます。
ページトップへ