CSSのスタイルの優先順位のルールと優先度を上げる方法を解説!

CSSではスタイルの指定が複数あり重複しているときに優先順位を考える必要があります。CSSの優先順位のルールと優先度の上げ方について解説していきます。

コンテンツ [表示]

  1. 1CSSのスタイルの優先順位のルール
  2. 1.1CSSの優先順位のルール
  3. 1.2
  4. 2CSSのスタイルの優先度を上げる方法
  5. 2.1セレクタの指定を詳細にしていく(より詳細度を上げていく)
  6. 2.2どうしてもスタイルが効かない場合の最終手段「!important」
  7. 2.3!importantの使い方

CSSのスタイルの優先順位のルール

CSSでスタイルを適用していっても、「あれ?CSSを書いたのに適用されていない?」といった経験はないでしょうか?もちろん書き方の文法的な間違いなどもありますが、正しい文法で書いていても適用されないといった事態は現場でも往々にしてあります。

一番多いパターンとしては「CSSのスタイルの優先順位」の問題です。

例えば以下の例を見てみましょう。

この例ではh1.headingという2つのセレクタでスタイルを重複して定義していますが、前者のスタイルは適用されず無視され、後者のスタイルが適用されます。

このようにCSSでは指定されているスタイルが重複している場合に、どちらを適用させるかの優先順位のルールが存在します。

CSSの優先順位のルール

CSSで複数のスタイルがある場合に、どのスタイルが適用されるかは点数方式で下記の計算式で分かります。
 

CSSの点数方式の計算式
セレクタの指定 点数
タグのstyle属性で指定 1,000点 style="color: blue;"
IDセレクタ 100点 #header
classセレクタ 10点 .header
属性セレクタ 10点 a[href="qumeru.com"]
疑似要素 1点 :beforeなど
要素名 1点 liなど
ユニバーサルセレクタ 0点 *

以上が優先順位のルールになります。あとは今指定しているセレクタを見て、上記の表で何点になるのかを計算しましょう。

またもしも点数が同点の場合ですが、後から読み込まれた方のスタイルが適用される(上書きされる)ルールとなっていますのでご注意下さい。

上記の表で例を紹介します。

 

CSSの点数方式の計算式の例
セレクタの指定 計算 点数
div style="color: blue;" 1,000点 1,000点
#header 100点 100点
div.header 10点+1点 11点
ul li 1点+1点 2点
li:first-child 1点+1点 2点
header + *[href="qumeru.com"] 1点+0点+10点 11点

ではこのルールにのっとり、スタイルの優先順位を上げるにはどうしたらいいかを見ていきましょう。

CSSのスタイルの優先度を上げる方法

それでは前章で紹介したスタイルの優先順位のルールに則り、今適用したいスタイルの優先度をどうやって優先させるのか、その方法を見ていきます。

CSSでスタイルの優先順位をあげるには基本的には前章の点数をあげていく戦略となりますが、いくつかやり方がありますので、見ていきましょう。

セレクタの指定を詳細にしていく(より詳細度を上げていく)

例えば下記の例で前者のスタイルを適用させたい場合を考えてみましょう。

このままでは上記例では後者のスタイルが適用され文字が青になります。では前者を適用するにはどうしたらいいでしょうか?

点数を計算

まずは点数を計算してみましょう。前者であるliタグのセレクタは「1点」です。一方で後者の.itemはクラスの指定なので10点となります。

つまり前者のスタイルを適用させるには最低11点が必要です。(同点であれば後者のスタイルが適用させるのでやはり11点必要)

11点以上に持っていく1つの方法は下記の通りです。

前者のセレクタを.list liとしたことで10点+1点で、11点となりこちらのスタイルが適用されます。

このようによりセレクタの詳細度をあげたいったり、疑似要素を指定するなど点数を稼ぎ優先順位を上げていきましょう!

どうしてもスタイルが効かない場合の最終手段「!important」

最後にスタイルが効かない場合の最終手段である!importantを紹介します。この方法をつかえば点数に関係なく強制的に指定したスタイルが適用されます。

ただし!importantを使うと、メンテナンス性が著しく落ちるためおすすめは出来ません。あくまで最終手段として知っておきましょう。

!importantの使い方

例えば下記の例を見てみましょう。

CSSのスタイルが2つあり、明らかに後者の方が点数が高そうに見えます。しかし、前者のcolor redの指定のあとに!importantと記述することで、点数を無視してこのスタイルが強制的に適用されるようになります。

一件すると便利に見えますが、この!importantを多様すると、CSSが!importantだからけになり、点数計算どころではなく想定外のスタイルが適用されるなど後々に問題が出てきます。利用は最小限に留めましょう。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次