などの疑問や悩みを解決してまいります。
CSSには優先度があることをご存じでしょうか？
記述のコード量が増えてくると、クラス名が被ってしまっていたり、上書きしてしまうなどで意図しないCSSが反映されてしまう可能性が増えてきます。
優先度を理解していないと、「なぜこのCSSが上書きされてしまうのか」、逆に「なぜ上書きできないのか」原因不明のループに巻き込まれてしまいます。
そうならないためにもCSSの優先度を理解しておきましょう。
リンクファイルの読み込み順
基本的に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が宣言されていますね。
答えはこちらです！
テキストの色がグレーになりました。読み込まれたのは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がどのように反映されているか確認してみましょう。
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>#txt { color: pink; }
p { color: aqua!important; }このようにCSSファイルを2つ用意しまして、1つは<p>タグに、もう1つにはIDに指定しています。
通常ですとIDのCSSが反映されるのですが、<p>の方には値の末尾に!importantを追記しています。
このように記述することで<p>タグ側が優先されます。
検証ツールを見てみましょう。
このように!importantを使用することで優先順位を上げることが可能になります。
一見便利な記述に見えますが、!importantを上書きすることはできなくなってしまい、逆にCSS設計を壊す原因になりかねませんので乱用は推奨できません。
なのでCSSの優先順位を管理する場合は、タグやクラスを複数指定して詳細度を高めていき優先度を管理していくといいでしょう。
