競合が発生するケース
ある要素に対し、同じプロパティで異なる値が設定されている場合などに、競合が発生してしまうことになります。
p { color: red; }
p { color: green; }
上記の例では、p要素に対して color: red と color: green を同時に指定しているので、色の指定が競合してしまいます。
このような競合が発生した場合は、以下で説明する優先順位によって、適用されるスタイルが決定されることになります。
設定者による優先順位
スタイルシートには、制作者によって設定された制作者スタイルシート、閲覧者によって設定されたユーザースタイルシート、ブラウザに設定されているデフォルトスタイルシートがあります。
この設定者の違いによる優先順位は次のようになります。
- 1. 制作者スタイルシート
- 制作者が、自分のサイトをデザインする際に設定するスタイルシートです。他の2つのスタイルシートよりも優先されます。
- 2. ユーザースタイルシート
- 閲覧者が、自分が見やすいように設定したスタイルシートです（ブラウザで設定が可能）。
※!importantを指定することにより、制作者スタイルシートよりも優先させることが可能です。（最後の項目を参照） - 3. デフォルトスタイルシート
- ブラウザに設定されているデフォルトのスタイルシートです。制作者スタイルシートやユーザースタイルシートが設定されていない場合は、このデフォルトのスタイルシートが使用されます。
ユーザースタイルシート
p { color: green; }
制作者スタイルシート
p { color: red; }
例えば上記のように設定されている場合は、制作者スタイルシート側のスタイルが優先されるので、p要素内のテキストは赤（red）で表示されます。
セレクタの種類による優先順位
セレクタの種類による優先順位は次のようになります。（より詳細度の高いセレクタが優先されます）
- 1. IDセレクタ
- 1つの要素にだけスタイルを適用させる指定。
- 2. クラスセレクタ
- 分類に対してスタイルを適用させる指定。
- 3. タイプセレクタ
- 要素のタイプ別にスタイルを適用させる指定。
- 4. 全称セレクタ
- 全ての要素にスタイルを適用させる指定。
- style属性による指定は、IDセレクタよりも優先度は高くなります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
* { color: black; } /* 全称セレクタ */
p { color: blue; } /* タイプセレクタ */
p.example1 { color: green; } /* クラスセレクタ */
p#example2, p#example3 { color: red; } /* IDセレクタ */
</style>
</head>
<body>
<p>この文字色は青になります。</p>
<p class="example1">この文字色は緑になります。</p>
<p class="example1" id="example2">この文字色は赤になります。</p>
<p class="example1" id="example3" style="color: gray;">この文字色はグレーになります。</p>
</body>
</html>
記述位置による優先順位
セレクタの優先度が同一の場合は、より後の方に記述されたスタイルの指定が優先されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p { color: blue; }
p { color: green; }
p { color: red; }
</style>
</head>
<body>
<p>この文字色は赤になります。</p>
</body>
</html>
優先順位の変更（!important）
通常は、上記のルールで優先順位が決められますが、!important を指定することで優先順位を入れ替えることが可能になります。
指定方法は次のようになります。
p { color: green !important; }
!important が指定されたスタイルが、最優先されることになります。
ユーザースタイルシート
p { color: green !important; }
制作者スタイルシート
p { color: red; }
例えば上記のように設定されている場合は、ユーザースタイルシート側のスタイルが優先されるので、p要素内のテキストは緑（green）で表示されます。