カテゴリー

キーワード

 
> 【CSS】セレクタによるスタイ...

【CSS】セレクタによるスタイルの優先順位


2015 年 4 月 8 日 投稿    view: 1381
タグ:
このエントリーをはてなブックマークに追加

セレクタによるスタイルの優先順位

こんにちは、WEBマーケティング部の杉尾です。
今回はセレクタによるスタイルの優先順位を紹介します。


よろしければ、最後までお付き合いください。


セレクタについてはコチラをご覧いただくと、よくわかると思います。


【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選
【CSS】CSS3で追加されたセレクタ 19選!!



スタイルの優先順位


優先順位は下に書いたスタイルだが…


以前、CSSの基礎知識を紹介したときに、


【CSS】CSSとは? カスケーディング・スタイル・シートって? CSSの基礎知識を紹介します


下に書いたスタイル(よりHTMLファイルに近い方)が優先的に適用されるという説明をしました。


基本的にはそれで間違いないのですが、『指定するセレクタ』によって優先順位が違ってくることがあります。


たとえば、こういう場合です。


HTML

<div id="test">
    <p>
        テスト
    <p>
<div>

CSS

#test {
    color:red;
}
p {
    color:blue;
}

この場合、下に書いたスタイルが適用されることを考えると、『テスト』という文字は青文字になりそうです。
ですが、実際は赤文字になります。


これは『要素セレクタよりも、id属性についたスタイルの方が優先される』からです。


次項で詳しく述べます。


優先順位は?

1. !importantと指定したスタイル

2. HTMLタグに直接書いて指定したスタイル

3. idセレクタで指定したスタイル

4. classセレクタ、属性セレクタ、疑似セレクタで指定したスタイル

5. 要素セレクタで指定したスタイル

6. 後に書いたスタイル

7. 全称セレクタ(*)で指定したスタイル


上の方が優先されます。


1を除き、この優先度は点数として具体的に示すことができます。


更にそれらを組み合わせることで、優先度が変わってきます。


CSSの点数計算をW3C公式リファレンスから

W3Cの仕様書に詳しく書かれていますので、該当箇所を抜粋します。


W3C公式リファレンス(外部サイト)
http://www.w3.org/TR/css3-selectors/#specificity


・count the number of ID selectors in the selector (= a)
・count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
・count the number of type selectors and pseudo-elements in the selector (= c)
・ignore the universal selector


これの日本語訳は以下のようになってます。


・セレクタ中の IDセレクタの個数を数える (= a)
・セレクタ中のクラスセレクタ、属性セレクタ、擬似クラスの個数を数える (= b)
・セレクタ中の要素セレクタと擬似要素の個数を数える (= c)
・全称セレクタは無視する


点数のイメージはこういう感じです。


  id(a) class、属性、擬似クラス(b) 要素、擬似要素
#test 1 0 0
.test 0 1 0
p 0 0 1

idセレクタのみがある場合は、100点
classセレクタのみがある場合は、10点
要素セレクタのみがある場合は、1点


というイメージで考えるとわかりやすいと思います。


これらに加えて…、


・:not()擬似クラス内のセレクタも他のセレクタと同様に数えますが、:not()擬似クラスそれ自体は擬似クラスとしては数えません。
・style属性がある(HTMLタグに直接CSSを書いている)場合についてはCSS2.1で説明されている通り、他のものより優先されます。
(CSS2.1まではこれも点数がありました。1000点)


W3C公式リファレンス(外部サイト)
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity


W3C公式リファレンスの具体例と解説


W3Cが出している具体例は以下の通りです。


specificityは特殊性、個別性を意味する言葉です。
この場合は『セレクタの詳細度』とするとわかりやすいと思います。
セレクタの詳細度は10進法ではないので、桁が繰り上がるということはありません。


*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */


これを個別に解説すると以下のようになります。


左側がセレクタ、/*以降が点数の計算です。specificity =  の部分が点数です。


*               /* a=0 b=0 c=0 -> specificity =   0 */

全称セレクタなので無視されます。点数なしです。


LI              /* a=0 b=0 c=1 -> specificity =   1 */

liは要素セレクタなのでc=1です。


UL LI           /* a=0 b=0 c=2 -> specificity =   2 */

ul li ともに要素セレクタなのでc=2です。


UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */

ul ol li すべて要素セレクタなのでc=3です。


H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */

h1が要素セレクタなのでc=1、*[REL=up] が属性セレクタなのでb=1です。


UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */

ul ol liが要素セレクタなのでc=3、.red がクラスセレクタなのでb=1です。


LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */

liが要素セレクタなのでc=1、.red.level がそれぞれクラスセレクタなのでb=2です。


#x34y           /* a=1 b=0 c=0 -> specificity = 100 */

#x34y はid属性なのでa=1です。


#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

#s12はid属性なのでa=1、:not(FOO) が否定擬似クラスなのでc=1です。


ご覧いただいたように、それぞれspecificity(セレクタの詳細度)が計算されます。
この数字の大きい方に指定されているスタイルが優先的に反映されます。


優先度比較

冒頭に示した具体例を点数計算してみます。


HTML

<div id="test">
    <p>
        テスト
    <p>
<div>

CSS

#test {
    color:red;
}
p {
    color:blue;
}

解説

#test ⇒ id属性なのでa=1。specificity(セレクタの詳細度)は100
p ⇒ 要素セレクタなのでc=1。specificity(セレクタの詳細度)は1


比較すると#testの方が大きいので、『テスト』は赤文字になります。


注意点


『!important』を乱用しない

!important』は最優先されるので便利ですが、乱用するとCSSの可読性が下がります。
メンテナンスの際、どこで指定しているかわからないということになりかねません。
「画面に表示されたスタイルが違う」となっても該当箇所だけでなく、別のところに書かれた!important付きのスタイルを探さないといけない羽目になります。


!importantは最後の切り札と覚えておきましょう。


1つのファイルにセレクタを4,095個までしか指定できない(IE9以下限定)

これはIE9以下限定ですが、4,096個以上のセレクタは無視されます。
お気をつけください。


まとめ

優先順位を点数計算で紹介しましたが、スタイルはより具体的に指定している方が優先されるという感覚でいいと思います。
慣れてくると、たとえ間違ったとしても画面に現れているスタイルを見れば、すぐに修正点がわかるようになります。


実際、現場では誰も点数計算なんてやっていません。
スタイルを反映するまで一度も間違ってはいけないというルールなんてありませんから、そこまで厳密にやる必要がないんですね。


ですから、「どうも考えているスタイルが適用されない」と思ったら、この点数計算に立ち戻って考えてみるというくらいでいいでしょう。


しっかり理解して、迅速かつ簡潔なコードを書くのに役立ててください。


最後までお読みいただき、ありがとうございました。



併せてこちらもお読みいただくと、理解が深まると思います。

【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


【CSS】CSS3で追加されたセレクタ 19選!!


【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事