競合が発生するケース

ある要素に対し、同じプロパティで異なる値が設定されている場合などに、競合が発生してしまうことになります。

p { color: red; }
p { color: green; }

上記の例では、p要素に対して color: redcolor: 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)で表示されます。