スタイルの記述と優先順位について
【こちらの記事は、約4分程でお読みいただけます。】
こんにちは。技術担当の工藤です。
今日は、CSSの記述と優先順位について解説していきます。
CSSは書き方によって優先順位が異なります。ルールを理解していきましょう。
記述する場所
タグに直接書く
<p style="color: green;">このテキストは色を変更します。</p>
タグに直接書く方法です。
タグの後にstyle=”◯◯”で記述します。
2つ以上書く時は
<p style="color: green;float:left;">このテキストは色を変更します。</p>
このような形で書きます。
id、classも同時に書けます。その場合による順番の指定はありません。
headタグ内に書く方法
<head>
<style type="text/css">
p{
color: red;
}
</style>
</head>
headタグ内の中に書く方法です。
head内に、styleタグで囲った中身がCSSで読み込まれます。
外部スタイルシートで書く方法
<head> <link rel="stylesheet" href="style.css" type="text/css"> </head>
外部スタイルシートです。
の三種類があります。
これらには優先順位があります。
直書き > head内 > 外部スタイルシート
外部スタイルシートは、下に記述してあるスタイルシートほど有効になります。
外部スタイルシートで直書きを覆す記述
外部スタイルシートでも優先度を上書きするハックがあります。
コードの後に !important と記入すると優先度が高くなります。
p{
color: red !important;
}
※ 【;】の前に記述
p{
color: red !important;
}
p{
color: yellow !important;
}
これだと、後に記述されたほうが優先されます。
!importantは、一見便利そうに見えますが、多様しすぎると修正作業で、!importantを上書きする!importantなど作ってしまいカオスなCSSになりがちです。
使いすぎに注意しましょう。
classのネスト化で細かく指定出来ます
CSSには、上書きするルールがあります。
<div class="box">
<p class="text">テキスト</p>
</div>
.box .text{
color: red;
}
.text{
color: blue:
}
上記のようなスタイルシートのコードがあったとします。この時、box内の『.text』の文字カラーは何色になるでしょうか？
答えは、赤になります。
スタイルシートは、細かく指定すればするほど優先順位が上がります。この場合、.textは１つ。.box .textは２つになるので、こちらが優先されます。
body .warap .container .contents .article ul li みたいなスタイルがあれば、７点になるわけです。このスタイルに上書きをするには、７つ以上細かくする必要があるわけです。(実際の業務でここまで細かく指定する意味はありません）
<div class="box">
<p class="text">テキスト</p>
</div>
<p class="text">テキスト</p>
.box .text{
color: red;
}
.text{
color: blue;
}
この場合は、.box内にある.textは、赤くなりますが、.box外にある.textは青くなります。
.box .textは、訳すと「クラス「box」内の.textを指定しており.boxに包容されていない.textは適用外となります。
同じ、.box .textを外部スタイルシートとヘッド内に記述するとヘッド内の記述が優先されます。
外部スタイルシートを優先してほしければ、ヘッド内に書かれている記述よりもさらに細かく指定すれば外部スタイルシートが優先されます。
選択子の固有性
これまでは、全てclassの話でした。
選択子には固有性があり、計算式で数値が大きい順に優先度が高まります。
http://zng.info/specs/css3-selectors.html#specificity
選択子の固有性の計算を次に示す。
否定選択子は、その単純選択子の引数と同じに数えられる
選択子の中のID属性の数を数える(= a)
選択子の中のその他の属性及び擬似クラスの数を数える(= b)
選択子の中の要素名の数を数える(= c)
擬似要素を無視する。
(基数が大きい数値システムで)三つの数a-b-cを連結することにより、固有性を提供する。ある例:
* /* a=0 b=0 c=0 -> 固有性 = 0 */
LI /* a=0 b=0 c=1 -> 固有性 = 1 */
UL LI /* a=0 b=0 c=2 -> 固有性 = 2 */
UL OL+LI /* a=0 b=0 c=3 -> 固有性 = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> 固有性 = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> 固有性 = 13 */
LI.red.level /* a=0 b=2 c=1 -> 固有性 = 21 */
#x34y /* a=1 b=0 c=0 -> 固有性 = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> 固有性 = 101 */
注: HTMLのstyle属性の中で明示されたスタイルの固有性は、別のCSS3モジュール”カスケード及び継承”の中で説明される
ちょっとややこしいですが、要はIDが優先度が非常に高く、次に選択肢に属性及び擬似クラスが優先されて、あとはclassかタグで細かく指定したものが優先ってことです。
以下の例だと
<div id="box_id">
<div class="contents">
<p>テキスト</p>
</div>
</div>
#box_id p{
color: red;
}
.contents p{
color: blue;
}
#box_id pのテキストは赤くすると記述されていれば、.contents pで文字の色を指定しても文字の色は変わらず、idが優先されます。
!important
ただし、.contents pに『!important』を記述するとid指定よりclass指定が優先されます。
id、classにかかわらず、とにかく!importantを記述すると優先度が最高になります。
また、pに直接styleで記述してもタグが優先されます。タグに直接書いた場合の固有性は、1000。
!important宣言を付けた制作者側のスタイル定義
!important宣言無しの制作者側のスタイル定義
!important宣言無しのユーザスタイルシート
おわりに
優先度は、
- !importantを指定したスタイル
- ↓
- タグに直接書き込んだスタイル
- ↓
- ID属性で書き込んだスタイル
- ↓
- タグに直接書き込んだクラスか擬似クラス
- ↓
- classで書き込んだスタイル
- ↓
- 宣言なしのスタイル
になります。
最後に、!importantを!importantで上書きするには、!imporant内でも上記のルールが適用されるので、上書きする!importantのセレクタを細かく指定すると上書きが可能となります。
つまり!important同士のスタイルは、上記のルールが適用されるということです。
あと最近の傾向として、扱いづらいidでのスタイル指定はあまりしないようにしています。この辺はコーディングルールなどによって変わってきます。
