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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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