【まとめ】CSS｜セレクタによるスタイルの優先順位

CSSを勉強していると、きちんとスタイルを指定しても何故かそれが反映されないということがありました。
不思議に思ったので調べてみると、どうやらCSSにはスタイルの優先順位があるそう。
良い機会なので、CSSスタイルの優先順位について簡単にまとめてみました。

【目次】

パターン①　セレクタの種類が同じ場合

これはシンプルです。
全く同じセレクタに対して同じプロパティを設定している場合です。
この場合は、より後から読み込まれたスタイルが優先されてプロパティが上書きされます。

例えば、以下のようなパターン。

p {
    color: orange;
}
.
.
.

p {
    color: red;
}

pタグに対して、先にcolor:orange;と指定をした後に、またcolor:red;というように、同じセレクタに対して同じプロパティを設定しています。
この場合は、後に書かれているcolor:red;が優先され、文字は赤色になります。

こちらのパターンが少しややこしかったです。
ですが、一度法則を頭に入れてしまえば問題なさそうです。

このパターンはつまり、
「指定方法（セレクタ）は違うんだけど、指定している箇所は同じor一部被っている」
場合のことです。

classやidをセレクタにしている時ですね。
例えば、以下のようなパターン。

【HTML】

<p id="abc" class="def">テキスト</p>

【CSS】

p#abc {
    color: red;
}
.
.
.
p.def {
    color:orange;
}
.
.
.
p {
    color:black;
}

このCSSは、セレクタの種類こそ違いますが、すべて同じ箇所のスタイルを指定しています。
この場合は、”テキスト”の部分が何色になるのが正解なのか...

正解は...

テキスト

です。

どういうことかと言うと、セレクタごとに優先順位があるみたいです。
優先順位は以下のとおりです。

id > class > タイプセレクタ（要素のみを指定するパターン） > 全称セレクタ

更に細かく言うと、

要素を特定したid(p#abc) > id > 要素を特定したclass(p.def) > class > タイプセレクタ（要素のみを指定するパターン） > 全称セレクタ

となります。

上の例だと、「要素を指定したidセレクタ」であるp#abc {color: red;}が最優先されたというわけですね！

最後にまとめです。

①同じセレクタで、同じプロパティが指定された場合

　　後から読み込まれたスタイルが優先される

②異なるセレクタで、同じプロパティが指定された場合

　　要素を特定したid > id > 要素を特定したclass > class > タイプセレクタ > 全称セレクタ

優先順位をきちんと理解した上で、きれいなCSSをかけるようになりたいですね！