CSSは親要素に指定されたスタイルを引き継ぎ、自身に指定したスタイルがそれと競合する場合は上書きをしながら、段階的にスタイルが設定されていく仕組みになっています。この仕組みが「カスケード（階段状になった連続した小さな滝）」の名前の由来となっています。
また、同じ要素に対して異なるスタイルが指定されている場合は、どのスタイルを適用するかを優先順位にもとづいたルールによって適用されます。
ここでは、この優先順位のルールについて解説をしていきます。
このページの目次
スタイルの継承
CSSには「継承」という仕組みがあります。継承とは、親要素に指定されたスタイルがその子要素に対しても引き継がれて適用される仕組みのことをいいます。
親要素のスタイルが引き継がれた上で、子要素に競合する独自のスタイルが指定された場合、それが優先され上書きされていくようになっています。例えば、body要素の文字色を赤色に指定すると、その子要素のp要素の文字色も赤色になります。さらにp要素に文字色を青色に指定すると、p要素の文字色は青色で上書き設定されることになります。
ただ、この継承はすべてのプロパティに起こるわけではありません。例えば、背景色や背景画像の指定などは継承されないプロパティです。
Note
自動的に継承されないプロパティでも、値に「inherit」を指定することで親要素の値をそのまま継承させることができます。値にinheritが指定されると、そのプロパティが指定されている親要素へと遡って捜されます。親要素に該当するプロパティがない場合は、さらにその親要素へと遡っていきます。
スタイルが競合した場合の優先順位３つのルール
同じ要素に異なるスタイルが指定され競合している場合、次の３つの条件によって優先順位がつけられています。
- 誰の設定したスタイルか
- どの種類のセレクタか
- どの順序で書かれているか
❶「誰の設定したスタイルか」による優先順位
CSSには制作者によって設定された「制作者スタイル」以外に、閲覧者によってWebブラウザに設定された「ユーザ定義スタイル」と、Webブラウザにデフォルトで設定されている「ブラウザ標準スタイル」というスタイルがあります。
| 種類 | 意味 |
|---|---|
| ブラウザの標準スタイル | それぞれのWebブラウザに設定されているデフォルトのスタイルシートです。制作者スタイルやユーザー定義スタイルが設定されていない場合に適用されます。 |
| ユーザー定義スタイル | 閲覧者が、自分が見やすいようにWebブラウザのオプションなどで設定したスタイルシートです。 |
| 制作者スタイル | Webサイトの制作者が、デザインする際に設定するスタイルシートです。 |
この設定者の違いによる優先順位は次のようになります。
ブラウザ標準スタイル ＜ ユーザ定義スタイル ＜ 制作者スタイル
ユーザ定義スタイルがあれば、ブラウザ標準スタイルを上書きし、制作者スタイルが指定されていればユーザ定義スタイル、ブラウザ標準スタイルを上書きすることになります。
Web制作においては必ず製作者スタイルが優先されますので、この優先順位を特に気にする必要はありません。
❷「セレクタの種類」による優先順位
CSSを設計する上で最も注意が必要なのは、セレクタの種類によって優先順位があるということです。セレクタの種類による優先順位を明確にするために、セレクタには種類によってそれぞれポイント（点数）が決められています。複数のルールが同じ要素に適用されたとき、どのルールが適用されるのかを数値化して判定するためのもので、詳細度といいます。その数値が高いほど詳細度が高く、優先されるということになります。
詳細度の計算のためにセレクタが種類によって持っている詳細度を決めるポイントは次のようになります。
| 種類 | 詳細度 |
|---|---|
| IDセレクタ | 100 |
| classセレクタ・属性セレクタ・擬似クラス | 010 |
| 要素セレクタ・擬似要素 | 001 |
| 全称セレクタ（ユニバーサルセレクタ） | 000 |
要素セレクタは「１ の桁の位」、class セレクタは「１０ の桁の位」、ID セレクタは「１0０ の桁の位」それぞれポイントを持っており、桁が高いほど優先度が高くなります。
要素/疑似要素 ＜ class/属性/疑似クラス ＜ ID
これは、ID セレクタで指定したスタイルはclassセレクタで指定したものより詳細度が高いので、ID セレクタで指定したスタイルが適用されるということです。
子孫セレクタを指定したり、セレクタを接続した場合など、セレクタを組み合わせことでそれぞれのセレクタのポイントが加算されることになります。
例えば次のような場合、それぞれのセレクタの点数の計算方法を見てみましょう。
HTMLコード
<p class="blue red">詳細度はセレクタの優先度を決めるポイントです。</p>セレクタの優先度を決める点数の計算方法
p { /* 要素セレクタ */
color: green;
}
.red { /* classセレクタ */
color: red;
}
p.blue { /* 要素セレクタ ＋ classセレクタ */
color: blue;
}この場合、「p」は要素セレクタなので001ポイント、「.red」がclassセレクタなので010ポイント、「p.blue」が「要素セレクタ ＋ classセレクタ」の合計で011ポイントとなり、最も詳細度の高い「p.blue」のセレクタで指定されたスタイルが適用されます。
このように、セレクタを複数記述することで点数が高くなり、優先順位が上がることになります。
注意しなければならないのは、ポイントの加算で桁の壁を越えることはないということです。桁の小さいセレクタをたくさん組み合わせていても、より桁が大きいセレクタが指定されていればそちらが優先されるということです。下の桁のセレクタがいくら接続されても詳細度として上の桁のポイントを上回ることはありません。
❸「書かれた順序」による優先順位
書かれた位置（順番）による優先順位があります。原則として、セレクタの種類による優先度が同じ場合はより後の方に書かれたスタイルの指定が優先されます。
これは外部のCSSファイルをlink要素で読み込む場合や、head要素内でstyle要素でスタイルを書く場合にも同じルールになります。
例えば、外部CSSファイルの読み込みのためのlink要素が複数あった場合に、記述された順番が後のファイルの内容が、後に記述されたスタイルとみなされて優先されます。
head要素内のlink要素の読み込み順による優先度
<link href="common.css" rel="stylesheet">
<link href="style.css" rel="stylesheet"> <!-- 後のこちらのスタイルが優先 -->これはstyle要素での指定でも同じで、style要素の後にlink要素が書かれている場合には、link要素で読み込まれた外部CSSファイルの内容が優先されます。逆にlink要素の後にstyle要素でスタイルを指定すれば、style要素の内容が優先されます。
読み込んでも記述しても後に書かれた方が優先される
<link href="style.css" rel="stylesheet">
<style> <!-- ←後に書かれたこちらのスタイルが優先 -->
p {
color: blue;
}
</style>もっとも優先度が高いインラインスタイル形式
どのセレクタを使った指定よりもより優先順位の高い指定方法が、インラインスタイル形式になります。HTMLタグに直接書かれたstyle属性で指定されたスタイルは、他のスタイルよりも優先されます。ただし、インラインスタイル形式での指定方法はメンテナンス性が悪くなるため、できる限り避けるようにしましょう。
インラインスタイルシート形式での記述例
<p id="red" style="color: blue">インラインで指定された青色が適用されます。</h1>IDセレクタによってスタイルを指定
#red {
color: red;
}IDセレクタによる指定は無視され、インラインスタイル形式で指定されたスタイルが適用されています。
優先順位の強制的な変更（!important）
「!important」を指定することで優先順位無視してを強制的にスタイルを適用することができます。 値と「;」の間に!importantと記述します。!importantを付けた場合、どの指定方法よりも最優先でスタイルを適用することができます。
優先順位の強制変更をする!important
p {
color: red !important;
}この!importantの使用は必要最小限にしましょう。!importantを指定すると他のセレクタで上書きができなくなり、多用するとコントロールすることが難しくなり、意図したスタイルの適用ができなくなることがあります。
まとめ
セレクタの優先順位のまとめです。
