CSS適用の優先順位を整理した

スポンサーリンク

 


どうも、サーロインです。

今回はCSSの詳細度について。
これを知っているとCSS書くときに捗りそうなので、少し勉強しました。

基本ルールは「後ろに書かれたCSS適用」

例えば下記のHTMLとCSSがあったとします。

   <div id="title" class="heading">
     <p class="text">テキスト</p>
   </div>
  p {
    color: red;
  }

  p {
    color: blue;
  }


pに対してスタイルが2つ書かれていますが、同じ要素に対して複数スタイルが指定された場合、後に書かれたスタイルが適用されます。

なのでここでは、テキスト青文字になります。

出力結果


デベロッパーツールで確認すると、redではなくblueを適用しているのが見て取れます。
Chromeデベロッパーツールでの確認

優先順位をコントロールする「詳細度」

詳細度とは

CSSには詳細度という考え方があります。
詳細度とは、「セレクタをどれだけ詳細に指定しているか」を表す指標です。

先程のHTMLを例に考えます。

   <div id="title" class="heading">
     <p class="text">テキスト</p>
   </div>

CSSでは「#id > .class > 要素」の順で優先順位があり、要素で指定するよりもclassで指定したスタイルを優先し、classで指定するよりもidで指定したスタイルを優先して適用します。

例えばテキストにスタイルを適用したい場合、p{~~}.text{~~}で指定した場合、.text{~~}のほうが優先して適用されます。

/* 適用される */
  .text {
    color: blue;
  }
/* 適用されない */
  p {
    color: red;
  }

p{color: red;}は後から書いたにも関わらず、詳細度の高い.textで書いたスタイルのほうが適用されて、テキストは青文字で表示されます。

詳細度の高いclass指定のスタイルを優先

実用例
  #title .text {
    color: blue;
  }

  .titleArea .text {
    color: red;
  }

  p.text {
    color: green;
  }

上記のように、テキストに対して3つの指定があったとき、どのスタイルが適用されるでしょうか?


答えは、一番上の#title .textです。

賢い人はこのぐらい頭の中で考えて答えを出せそうですが、私は間違えるのが怖いのでいつも図に書き出して考えています。

詳細度を図に書き出してみる

上図は、例えば#title .textだと、idとclassが一つずつあるので①idが1、②classが1。
.titleArea .textはclass指定が2つでほかは無いので、②classが2。
といった具合に詳細度を数値化していきます。

ざっと数えると、

  • #title .text --> 1.1.0
  • .titleArea .text --> 0.2.0
  • p.text --> 0.1.1

みたいな感じに数値化できます。

CSSは「#id > .class > 要素」の順に優先されるので、①id は#title .textが1でほかは0なので、「あ、こいつが適用されるのか」と一発でわかります。

ちなみに、残った「0.2.0 vs 0.1.1」を比べたとき、0.2.0である.titleArea .textのほうが②class の数値が高いので、二番目に詳細度が高いのは.titileArea .textです。p.textはべべです。

奥の手「インラインスタイル」

大抵の場合は、詳細度を駆使してCSSの優先順位を自在にコントロールしますが、インラインスタイルで指定すれば詳細度に関係なくインラインスタイルのCSSが適用されます。

インラインスタイルとは、タグのstyle属性に直接スタイルを書いていくことです。

     <p class="text" style="color: yellow;">テキスト</p>

つまり、下記のようなコードは、テキストはインラインスタイルで指定した黄色で表示されます。

  <style>
  #title .text {
    color: blue;
  }

  .titleArea .text {
    color: red;
  }

  p.text {
    color: green;
  }

  </style>
<body>
   <div id="title" class="titleArea">
     <p class="text" style="color: yellow;">テキスト</p>
   </div>
</body>

f:id:tkhstol-929:20190217220606p:plain
 

しかし、インラインスタイルでスタイルを書くと、ソースが見づらくなるのであまり推奨されません。
インラインスタイルを使う場面といえば、javascriptからスタイルを書き換えたときとかでしょうかね。

禁術「!important」

インラインスタイルよりも、更に強力なスタイルがあります。それは、!importantです。

書き方はとても簡単で、絶対優先させたいスタイルの末尾に!importantと書くだけです。

  p.text {
    color: green !important;
  }

!importantが書かれたスタイルは、詳細度・インラインスタイルをすっ飛ばして最優先で適用されます。最強の呪文です。

f:id:tkhstol-929:20190217221107p:plain

!importantは強力すぎるあまり、ソースコードを汚くしてしまう恐れが非常に高いので、めったに使われることはありません。
もし使ったとしてもソースレビューで間違いなく指摘されます。指摘しないエンジニアはいません。

こいつの使いみちは、Bootstrapなどで予め決められたスタイルを無理やり上書きしたいときとかですかね。。。
あんまり使いみちが思いつきませんが、知識として知っておくべきものです。

まとめ


CSS優先順位
  • 基本は「後から書いたスタイル」が適用される
  • 詳細度は「id > class > 要素」の順に優先順位が決まる
  • 「!important > インラインスタイル > 詳細度」の順に優先されるルールが有る
  • !importantは極力使わない!

参考URL

エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita

https://dotinstall.com/lessons/basic_css_styles

にほんブログ村 IT技術ブログへ
にほんブログ村