【初心者向け】CSSの詳細度について解説します

なやむくん

CSSが記述通りに反映されない…

なやむさん

後に記述しているのに上書きされない…どうして？

などの疑問や悩みを解決してまいります。

CSSには優先度があることをご存じでしょうか？

記述のコード量が増えてくると、クラス名が被ってしまっていたり、上書きしてしまうなどで意図しないCSSが反映されてしまう可能性が増えてきます。

優先度を理解していないと、「なぜこのCSSが上書きされてしまうのか」、逆に「なぜ上書きできないのか」原因不明のループに巻き込まれてしまいます。

そうならないためにもCSSの優先度を理解しておきましょう。

本記事の目次

1 リンクファイルの読み込み順
2 タグ VS タグ
3 タグ VS クラス
4 クラス VS ID
5 タグの複数指定 VS タグ
6 タグの複数指定 VS クラス
7 ID VS クラスの複数指定
8 優先度格上げ　!important

リンクファイルの読み込み順

基本的にCSSは<link>タグを使って読み込ませて使いますが、複数のCSSを読み込ませる場合ここでも優先順位が関わってきます。

例えば以下を見てください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSSの優先順位を学ぼう</title>
        <link rel="stylesheet" href="/css/style3.css">
        <link rel="stylesheet" href="/css/style1.css">
        <link rel="stylesheet" href="/css/style2.css">
    </head>
    <body>
        <p>CSSの優先順位を学ぼう</p>
    </body>
</html>

上記ではCSSファイルが3つ読み込まれています。

３つのCSSファイルには以下のCSSが記述されています。

p { color: pink; }

p { color: gray; }

p { color: aqua; }

それぞれ<p>タグに対してCSSが宣言されていますね。

みつた

ここで問題です。どのCSSファイルがページに反映されるでしょうか？

答えはこちらです！

テキストの色がグレーになりました。読み込まれたのはstyle2.cssです。

style2.cssが読み込まれているのは、一番最後です。

つまり優先度が高いのは一番最後に読み込まれているファイルになるため、style2.cssが反映されたことになります。

ポイント

CSSファイルは後に読み込まれるほど優先度が高くなる

タグ VS タグ

以下のHTMLとCSSのコードを見てください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSSの優先順位を学ぼう</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <h1>CSSの優先順位を学ぼう</h1>
    </body>
</html>

h1 { color: aqua; }
h1 { color: pink; }

今度は<h1>タグに対して2つCSSを記述しました。

みつた

どちらが反映されるかは大体予想付くかと思います！

答えはこちらです！

このように2行目のCSSが反映されていることが分かりました。

ここで検証ツールを開いてCSSがどのように反映されているか確認してみましょう。

みつた

検証ツールはF12キーか右クリック ⇒ 検証で開けます！

1行目に記述したCSSが2行目に記述したCSSで上書きされていることがわかりますね。

タグ VS クラス

<h1>タグにクラスを付けてみてはどうでしょうか？以下のコード用意しました。

    <body>
        <h1 class="title">CSSの優先順位を学ぼう</h1>
    </body>

.title { color: pink; }
h1 { color: aqua; }

<h1>タグにクラスtitleを追加して、CSSをそれぞれに記述しました。

この結果どうなるでしょうか。

今までは後に記述したCSSが反映されていましたが、1行目のCSSが反映されましたね。

つまりタグよりもクラスの方が優先度が高いということになります。

ポイント

クラスはタグよりも優先度が高い

クラス VS ID

次はクラスの対抗馬でIDをぶつけてみます。以下コードを用意しました。

    <body>
        <h1 id="h1" class="title">CSSの優先順位を学ぼう</h1>
    </body>

#h1 { color: aqua; }
.title { color: pink; }

今回は<h1>タグにIDを追加してクラスと一騎打ちです。

さて、どうなるでしょうか。

1行目に書いたCSSが反映されました。

これでクラスよりもIDが優先度が高いことが分かりましたね。

タグの複数指定 VS タグ

今度はタグを複数指定して試してみましょう。

    <body>
        <section>
            <h1>見出しです。</h1>
            <div>
                <p>本文はここに入ります。</p>
            </div>
        </section>
    </body>

section div p { color: aqua; }
p { color: pink; }

この結果は以下の通りになります。

１行目に記述したタグの複数指定したCSSが反映されました。

つまり、指定したセレクターの詳細度が高い方が優先されることになります。

ポイント

セレクターの詳細度が高ければ高いほど優先される

こちらはクラス指定でも同様で、詳細度が高い方が優先されます。

    <body>
        <section class="sec">
            <h1>見出しです。</h1>
            <div class="box">
                <p class="txt">本文はここに入ります。</p>
            </div>
        </section>
    </body>

.sec .box .txt { color: aqua; }
.txt { color: pink; }

タグの複数指定 VS クラス

次はタグの複数指定とクラス単体での調査です。

    <body>
        <section>
            <h1>見出しです。</h1>
            <div>
                <p class="txt">本文はここに入ります。</p>
            </div>
        </section>
    </body>

.txt { color: pink; }
section div p { color: aqua; }

クラスは単体でタグの複数指定に勝てるのか、といったところですね。

結果を見てみましょう。

このようにタグだけでは優先度が低いということが分かりましたね。

ID VS クラスの複数指定

最後にIDとクラスの複数指定の頂上決戦をしていきます。

    <body>
        <section class="sec">
            <h1>見出しです。</h1>
            <div class="box">
                <p id="txt" class="txt">本文はここに入ります。</p>
            </div>
        </section>
    </body>

#txt { color: pink; }
.sec .box .txt { color: aqua; }

これはどちらが優先度高いのか難しいですね…。

みつた

どちらが優先されるのか予想してみてください！

結果は以下です。

ID強しですね！

このことからIDが一番優先順位が高いことが分かりました。

ポイント

優先度が高いのは順にID、クラス、タグ

優先度格上げ　!important

今回の検証の結果でIDが一番優先度が高いということが分かりました。

しかし、タグだけでもIDよりも優先順位を上げる方法があります。

それが!importantです。以下を見てください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSSの優先順位を学ぼう</title>
        <link rel="stylesheet" href="/css/style.css">
        <link rel="stylesheet" href="/css/style1.css">
    </head>
    <body>
        <p id="txt">本文はここに入ります。</p>
    </body>
</html>