CSS セレクタの優先順位を検証【HTML CSS 詳細度 書き方】


CSSの指定の仕方には幾つもの方法があります。
 
各セレクターの優先順位を知っていないと、どれに何が適用されるのかわからなくなって、乱雑な書き方になってしまいます。
 
そこで今回、CSSの優先順位(詳細度)の簡単な検証を実施してみましたのでご紹介します。

 

もくじ

以下は本記事のもくじです。

  1. 1.CSS セレクタの優先順位
  2. 2.セレクタの優先順位の検証
    1. 2-1. 検証環境
    2. 2-2. 検証
      1. 2-2-1. 要素セレクタとユニバーサルセレクタだけの場合
      2. 2-2-2. 擬似クラス、class、属性セレクタを追加した場合
      3. 2-2-3. インライン指定、idセレクタも追加した場合
      4. 2-2-4. !importantを追加した場合
      5. 2-2-5. 補足 擬似要素も追加した場合


 
それでは説明していきます。
 

スポンサーリンク



 
 

1. CSS セレクタの優先順位

CSS セレクタの優先順位の基本的なルールは下記のような順番になります。

  1. !important
  2. インライン (要素に直書き 例. <p style=”〇〇”>)
  3. IDセレクタ(#〇〇=)
  4. クラスセレクタ(.〇〇=)、属性セレクタ([〇〇=])、擬似クラス(:△△)
  5. 要素セレクタ、擬似要素(::△△)
  6. ユニバーサルセレクタ(*)

1が最も優先順位が高くて、数字が大きくなるほど優先順位が低くなります。

また、同じ優先度の場合はCSSファイルで下に記述してある方が優先されます。

今回は、実際にHTMLとCSSを書いてみて上記のルールを確認してみました。

 

2. セレクタの優先順位の検証

2-1. 検証環境

今回検証した環境は以下の通りです。

PC: MacOS X EI Captain(10.11.4)

Webブラウザ:Chrome バージョン 51.0.2704.103 (64-bit)

 

それでは検証していきます。

2-2. 検証内容

 

2-2-1. 要素セレクタとユニバーサルセレクタだけの場合

 

はじめに要素セレクタとユニバーサルセレクタの優先順位の確認です。

 

■HTML文

 

■CSS

 

何色になるでしょう?

css セレクター 優先順位 検証結果 要素セレクタが優先されました

結果 要素セレクタが優先されました

 

要素セレクタが優先されて青色になりました。

2-2-2. 擬似クラス、class、属性セレクタを追加した場合

 

2-2-1に擬似クラス、classセレクタ、属性セレクタを追加した場合です。

 

■HTML文

 

クラスセレクタ、属性セレクタ、擬似クラスのどれかが適用されるはずです。

 

何色になるでしょう?

 

CSS セレクター 優先順位 検証結果 classセレクタが適用された

結果 classセレクタが適用された

 

クラスセレクタ、属性セレクタ、擬似クラスは同順位になりますが、classセレクタを一番下に記述しているので、classセレクタの緑色指定が優先されて緑色になりました。

 

ちなみに下記のように擬似クラスを一番下にした場合はどうなるでしょうか。

 

何色になるでしょう?

 

CSS セレクター 優先順位 検証結果 擬似クラスが適用された

結果 擬似クラスが適用された

 

CSSで下に記述している擬似クラスが優先されてネイビー色になりました。

 

 

最後に、属性セレクタを一番下にした場合はどうなるでしょうか。

 

何色になるでしょう?

 

CSS セレクター 優先順位 検証結果 属性セレクタが優先されました

結果 属性セレクタが優先されました

 

一番下の属性セレクタが適用されて茶色になりました。

 

※補足)ここで、例えば:first-child{}をh3:first-child{}してみるとどうなるでしょうか。

何色になるでしょう?
 

css セレクター 優先順位 検証結果 h3:first-childが適用された

結果 h3:first-childが適用された

h3:first-childのネイビー色が適用されました。h3を足すことで詳細度が上がるので優先順位が一個上がり、navyが適用されます。

 

2-2-3. インライン指定、idセレクタも追加した場合

 

2-2-2にインライン直書き、idセレクタ指定指定も追加して、何が優先されるか確認します。

 

■HTML文の例

※大阪はインラインで直接オレンジ色を指定します。

 

大阪と京都はIDセレクタで黄色に指定しています。

 

何色になるでしょう?

 

CSS セレクター 優先順位 検証結果 インライン>IDセレクタ>クラスセレクタになりました

結果 インライン>IDセレクタ>クラスセレクタになりました

 

大阪はIDセレクタで黄色に指定していましたが、インラインでオレンジに指定していたためオレンジになりました。

京都はIDセレクタで黄色に指定していたため、黄色になりました。

九州はインライン指定もIDセレクタもなかったのでクラスセレクタが適用されて緑色になりました。

 

2-2-4. !importantを追加した場合

 

さらに、最も優先順位の高い!importantも追加してみます。

■HTML文

 

■CSS

 

何色になるでしょうか?

 

CSS セレクター 結果 !importantが優先された

CSS セレクター 結果 !importantが優先された

結果は、もっとも優先される!importantが適用されて赤色になりました。

 

2-2-5. 補足 擬似要素も追加した場合

 

最後に2-2-4に擬似要素::first-letterを追加してみるとどうなるでしょうか。

■HTML文

 

■CSS

 

 

 

何色になるでしょう?

 

css セレクター 優先順位 検証結果 !importantよりも擬似要素が優先された?

結果 !importantよりも擬似要素が優先された?

 

!importantが効いているから全て赤になると予想していましたが、擬似要素のfirst-letterが優先されてしまいました。

 

念のためSafariで閲覧しても同様でした。

 

ルールに従うと!importantは最優先じゃないの?なんで?と思いましたが。。

 

※first-letter同士でimportantありなしで比較してみると、!importantのある方が優先されて一文字目は黄色になりました。

 

css セレクター 優先順位 検証 !importantのついた擬似要素が優先された

!importantのついた擬似要素が優先された

 

色々使うとややこしいからできるだけ単純に書くように考えないといけないですね。

!importantはややこしくなるからあまり使わない方が良いようです。

 

下記の本を購入しましたがなかなか参考になります。

 
 

スポンサーリンク



 
 

今回は以上になります。最後までご覧いただきありがとうございました。

こちらの記事もおすすめです


コメント投稿

すべて必須項目です。メールアドレスが公開されることはありません。

CAPTCHA


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!