本記事のゴール

この記事を読んでいただくことによって、

CSSの適応優先順位について知る
実装の例を見て、使い分けが前よりできるようになる
結果、CSSが前よりちょっと好きになる

というハッピーな状態になれます！
では早速やってきましょ〜〜〜〜

CSSとは？

「もうそんなの耳にタコが、目にイカが出来るぐらい見聞きしたわ！」と思うかもしれませんが、一応書いときます。

CSSは、 HTML と組み合わせて使用する言語です。 (~ 中略 ~)
例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

by.HTMLクイックリファレンス(今回も登場)
いい感じに要約すると、『HTMLとズブズブの関係で、文字の色とか大きさとか配置とかの見た目を変えてくれたりする最高にいい奴』です。
※セレクタとかプロパティとか値とかの説明は全部省きます！

逆にCSSを使わないと、テキストや画像がぜーんぶ左寄せで表示されるだけの味気ない見た目になってしまいます。
それはもう、全然面白くないですね。

CSSの優先順位

そんなCSS、記述した順番やセレクタによって適応される優先順位が変わるという性質を持っています！
本日は、その適応優先順位について深堀りしていきたいと思います。

HTMLは共通してこちらを利用します↓

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>最近毎日そうめん生活なんだが</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>

      <article id="momokuro" class="mononohu">
        <h1>ももクロちゃん</h1>
      </article>

    </body>
</html>

セレクタが同じ場合

一番最後に記述した設定が優先されます。

style.css

h1 {
  background-color: red;
}

h1 {
  background-color: yellow;
}

h1 {
  background-color: purple;
}

h1 {
  background-color: pink;
}

表示はこんな感じです。

◎どうしてこうなるのかな？
コードが上から読まれていくので、当然っちゃ当然ですね！
言わずともがなご理解いただけると思うので、次行きます。

条件を追加したセレクタの場合

セレクタの数が多ければ多いほど優先順位が高くなります。

style.css

h1 {
  background-color: red;
}

article h1 {
  background-color: yellow;
}

body article h1 {
  background-color: purple;
}

body h1 {
  background-color: pink;
}

表示はこんな感じです。

◎どうしてこうなるのかな？
background-color: purple;はセレクタが3つ、その他はセレクタが2つ以下で設定されています。
条件が多ければ多いほど優先順位が高くなるというルールなので、purpleの背景色が反映されました！

クラスセレクタの場合

要素名で指定するセレクタよりも優先順位が高くなります。

style.css

h1 {
  background-color: red;
}

body .mononofu h1 {
  background-color: yellow;
}

body article h1 {
  background-color: purple;
}

body h1 {
  background-color: pink;
}

表示はこんな感じです。

◎どうしてこうなるのかな？
今回はbackground-color: yellow;とbackground-color: purple;に3つずつセレクタを設定しました。
セレクタが同じ場合は一番最後に記述したセレクタが優先され、条件が多ければ多いほど優先順位が高くなると今までいっておりましたが、この結果からわかるように『セレクタ数が同じ場合は、クラスを利用しているものの方が優先される』と言う結果になりました。

IDセレクタの場合

クラスセレクタよりも優先順位が高くなります。

style.css

#momokuro h1 {
  background-color: red;
}

body .mononofu h1 {
  background-color: yellow;
}

body article h1 {
  background-color: purple;
}

body h1 {
  background-color: pink;
}

表示はこんな感じです。

◎どうしてこうなるのかな？
みなさん見てください。IDセレクタの効力がめちゃめちゃ強い事が判明しました！！！！！
私の予想だとbackground-color: yellow;にクラスセレクタを含めてセレクタを3つ設定したので、背景色は黄色になるはずだったのですが、IDセレクタが圧勝でした。
セレクタ数を何個に増やしても、IDセレクタには勝てませんでした。
おそるべしIDセレクタ。

まとめ

優先順位の効力順で並べます！！！

第一位 : IDセレクタ
　　　　→IDセレクタ１つだけで最強になる。クラスセレクタとか何個設定しても勝てぬ。

第二位 : クラスセレクタ
　　　　→セレクタ数が同じ場合は、クラスを利用しているものの方が強い(※IDセレクタを除く)

第三位 : セレクト数の多さ
　　　　→セレクタの数が多ければ多いほど強い(※IDセレクタを除く)

第四位 : 一番最後のセレクタ
　　　　→一番最後に記述したセレクタが強い(※IDセレクタを除く)

CSSの適応優先順位について

本記事のゴール

CSSとは？

CSSの優先順位

セレクタが同じ場合

条件を追加したセレクタの場合

クラスセレクタの場合

IDセレクタの場合

まとめ