カスケーディング

CSSには複数のプロパティ指定が重複した場合、どちらが優先するかを決める厳密なルールがあります。カスケーディングというのですが、これについて簡単に説明します。*1

カスケーディングの例

CSS
.color { color:red; }
span.color { color: blue; }
HTML
<span class="color">色付き文字</span>

としたとき、クラスcolor には２種類の色が指定されています。どちらの色が優先されて出力されるでしょうか？*2

色付き文字

赤という色指定と青という色指定が２つあって結果的には青が表示されました。これがカスケーディングです。<span class="color">色付き文字</span>という要素に対する指定は２種類ありましたが、要素名が付いているspan.colorの方が優先度が高いのです。

ではCSSを変更するとどうなるでしょう。

.color { color:red; font-weight: bold; }
span.color { color: blue; }

色付き文字

優先度の高いspan.colorで太字を指定してないにも関わらず太字になりました。これは、カスケーディングによる優先度評価が起こるのは競合する（同じ効果の）プロパティを指定したときのみ*3だからです。

優先度のルール

IDによる指定
クラスによる指定
親子関係による指定
同時クラス指定
順序

IDの指定

IDによる指定はすべてに優先します。

CSS
#color { color:red; } /* IDによる指定 */
span { color: blue; }
span.green { color:green; }
HTML
<span class="green" id="color">色付き文字</span>

色付き文字

クラスによる指定

CSS
span { color: blue; }
span.green { color:green; }
HTML
<span class="green">色付き文字</span>

色付き文字

親子関係による指定

CSS
div.red span { color: red; }
span { color: blue; }
HTML
<div class="red"><span class="green">色付き文字</span></div>

色付き文字

親子関係を指定した方が優先されます。親子関係の階層数は深ければ深いほど優先されます。すでに設定されている設定値を上書きする際に、よくクラス修飾を深くして記述するなどの方法が取られます。

クラス同時指定

CSS
span.red  { color: red; }
span.blue { color: blue; }
span.red.blue { color: magenta; } /* クラス同時指定 */
HTML
<span class="red blue">色付き文字</span>

色付き文字

順序

CSS
span.color { color: red; }
span.color { color: blue; }
span.color2 { color: green; }
HTML
<span class="color">色付き文字</span>
<span class="color color2">色付き文字</span>
<span class="color2 color">色付き文字</span>

色付き文字

色付き文字

色付き文字

同レベルの優先度ならば（CSS中で）後から指定された方が優先されます。

関連記事