WEBサイトのデザインでは定番になっているCSS（カスケーディング・スタイル・シート）。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。
そうなると、同じ名前の宣言で異なる値を与えてしまい意図しない結果になってしまうことも考えられます。
そこで、CSSを記述する上でCSSの設定内容がどのように反映されるのか優先順位に着目してまとめてみました。
最後に読み込まれるほうが優先順位が高い
同じ条件化で宣言された場合、最後に読み込まれるほうの設定が優先されます。記述例の場合は、文字サイズは「font-size: 10px;」が適用されます。
/* CSS記述例 */
.example {
font-size: 20px;
}
.example {
font-size: 10px;
}
詳細に宣言されているほうが優先順位が高い
要素や親子関係など詳細に記述されてるほうが優先度が高くなります。最初の記述例では、P要素が宣言されている「p.example」の内容が読み込まれる順番よりも優先されます。
/* CSS記述例-その１- */
p.example {
font-size: 20px;
}
.example {
font-size: 10px;
}
<!-- 表示側HTML-その１- --> <p class="example">文字サイズは20pxになります。</p> <span class="example">文字サイズは10pxになります。</span>
親要素がある場合も、読み込まれる順番より詳細度が優先されて反映されます。
/* CSS記述例-その２- */
.container p.example {
font-size: 20px;
}
p.example {
font-size: 10px;
}
<!-- 表示側HTML-その２- --> <div class="container"> <p class="example">文字サイズは20pxになります。</p> </div> <p class="example">文字サイズは10pxになります。</p>
重要指定ほうが優先順位が高い
「!important」が宣言されている場合、「!important」のほうが優先順位が高くなります。
/* CSS記述例 */
p.example {
font-size: 20px !important;
}
p.example {
font-size: 10px;
}
<!-- 表示側HTML --> <p class="example">文字サイズは20pxになります。</p>
いろいろ組み合わせてみたら
下記のような記述例の場合は、「!important」の内容が最も優先されて反映されます。
/* CSS記述例 */
.example {
font-size: 10px !important;
}
.container p.example {
font-size: 20px;
}
<!-- 表示側HTML --> <div class="container"> <p class="example">文字サイズは10pxになります。</p> </div>
「!important」が付加している場合が最も優先順位が高くなります。
これまでの記述内容は、同じ宣言場所での記述による優先順位でしたが、今度は、外部のCSSなのか同一ドキュメント内なのかといった記述場所の違いによる優先度をまとめてみます。
記述場所の違いによる優先度
まずは、記述場所に関係なく「!important」が宣言されている内容が最も優先され、次に要素内で「style属性」が宣言されている場合が優先順位が高くなっています。
（優先順位高）
・「!important」が宣言されている
・要素内で「style属性」が宣言されている
・head要素内でスタイルの内容が宣言されている
（優先順位低）
/* CSS記述例 */
.example {
font-size: 10px !important;
}
<!-- 表示側HTML --> <p class="example" style="font-size:30px;" >文字サイズは10pxになります。</p>
head要素内での記述について
head要素内でのCSSは外部のスタイルシートを読み込む場合と、直接style要素で記述する場合がありますが、この場合は後から読み込まれる内容が優先されます。
以前は、head要素内で直接記述された内容が外部スタイルシートよりも優先されるというような認識でしたが、今回、「Google Chrome 32」「firefox 26」「 Internet Explorer 11」でそれぞれ確認したら同等の扱いのようです。
@charset "utf-8";
/* 外部スタイルシート style.css */
.example {
font-size: 10px;
}
<head>
<!-- 表示側HTML -->
<style type="text/css">
.example {
font-size: 20px;
}
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<p class="example">文字サイズは10pxになります。</p>
</body>
</style>
作成者スタイルシートとユーザースタイルシート
「作成者スタイルシート」は、制作者が記述したCSSの内容で実際にサーバ上などにあるCSSまたはHTMLの記述です。対して「ユーザースタイルシート」は閲覧するユーザーが使用しているブラウザに設定することができるCSSです。
一般的には作成者スタイルシートが優先されますが重要指定「!important」が付加しているとユーザスタイルシートが優先されます。
（優先順位高）
・ユーザスタイルシート中で重要指定「!important」された宣言
・作成者スタイルシート中で重要指定「!important」された宣言
・作成者スタイルシート中の通常の宣言
・ユーザースタイルシート中の通常の宣言
（優先順位低）
もしユーザー側で制作側とは異なる表示がされる場合は「ユーザスタイルシート」のことを確認してみるといいかもしれません。
以上、CSSの記述による優先順位についてのまとめでした。
