【初心者向け】CSSセレクタの優先順位

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

CSSを書いている際に、同じシート内でどのCSSが優先されて適用されるのか？また、なぜか適用されないなどの現象に陥ったことはないでしょうか？

• CSSの優先順位が分からない…
• 自分の思うように適用されない…
• そもそも優先順位なんてあるの？…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

CSSを書く際に、シート内でどの順番で優先されているのか、CSSを正しく書いているけど、なぜか適用されない等の問題に陥ったことが多々あります。

ここでは、CSSが適用される優先順位や、強制的に適用させる方法など、CSSの基本的な部分をお伝えいたします！

※CSSについては、こちらの記事「【初心者向け】CSSとは？CSSってどう書くの？」を読んでみてください。

1 CSSスタイルの基本

CSSスタイルには、元々優先順位のルールが存在し、その順位でWebサイトへのスタイルが適用される仕組みになっています。

「CSSが上手く適用されない…。」と悩んでいる方も、CSSの記載（優先順位）に原因がある可能性もあります。

CSSの優先順位（基本ルール）を知ることによって、綺麗でかつスマートなCSSを書けることにも繋がります。

それでは、下記にて更に詳しく解説していきます！

※CSSの指定については、こちらの記事「CSSのpx、%、em、rem、vw、vh指定について！きちんと使い分けよう！」を読んでみてください。

CSSスタイルの基本優先順位

CSSスタイル内での基本的な優先順位から見ていきましょう！

下記のCSSを例にしますと…どちらの色が優先されると思いますか？…

p {
 background-color: red;
 background-color: black;
}

正解は、黒色の指定が優先されます。

なので、基本的には、後に書かれた（下に書かれた）CSSが優先される決まりになっています。

もう一つ、基本的なルールとしては、点数計算して高得点のものが適用されます。

下記の表にて、指定方法とそれぞれの得点などを記載しますので、ご参照ください。

※CSSの優先順位について、こちら「スタイルの優先順位－CSSの基本 – HTMLクイックリファレンス」も参考に読んでみてください。

セレクタ別優先順位

上記では、基本的な優先順位を解説しました！

次に、セレクタ別ではどう優先順位が適用されるのか疑問に思う方が多いかと思います。

一部の事例でいくつか解説していきます！

classセレクタとタイプセレクタ

下記のCSSを参考に見てください。

上部のCSSはクラスに対してのCSSになりますので、「classセレクタ」と言います。

下部のCSSは、classではなく、pタグそのものに対してのCSSになりますので、「タイプセレクタ」と言います。

下記の場合は、どちらのCSSが優先されるかと言いますと…

.box {
 background-color: red;
}
p {
 background-color: black;
}

この場合、背景色が赤になりますので、classセレクタとタイプセレクタとでは、classセレクタが優先されます。

classセレクタと親要素とセットのタイプセレクタ

CSSの指定方法を少し変えてみます。

上記の方法で優先されなかったタイプセレクタの前に親要素のclassセレクタが追加されました。

このような場合の優先順位はどうなるかと言いますと…

.box {
 background-color: red;
}
.box p {
 background-color: black;
}

今度は、背景色が黒になりますので、親要素とセットのタイプセレクタが優先されます。

idセレクタとclassセレクタ

次に、HTMLで指定した「id」に対してのCSSを適用させる「idセレクタ」とclassセレクタを比べてみます。

上部にidセレクタ、下部にclassセレクタで指定してみますと…

#block {
 background-color: red;
}
.box {
 background-color: black;
}

背景色が赤になりますので、idセレクタが優先されます。

2 強制的にCSSを適用させる方法

基本的な優先順位を解説してきました！

しかし、この優先順位を一気にかっ飛ばす最終手段が存在します。

トランプで言う、「ジョーカー」的なやつですね…(笑)

#block {
 background-color: red;
}
.box {
 background-color: black;
}
p {
 background-color: green!important;
}

上記のように、値の右隣に「!important」を宣言すると、強制的に優先順位が1番となります。

よって、背景色が緑に変わります。

ただし、「!important」がバッティングなどすると、意図しない適応がされる場合もありますので、本当にどうしようもない時の最終手段として準備しておきましょう！

※なるべく使用しないことをおすすめします。そのために、CSSの優先順位も考慮した書き方が大事になってきます。

3 まとめ

ここまで、CSSスタイルの基本的な優先順位＆事例と、最終手段の「!important」について解説してきました！

Webサイトを作る上で、CSSスタイルの基本的な優先順位は、知っておかなければなりません。

知っておくことで、なぜCSSが自分が思うように適用されないのか等のつまずく場面が少なくなり、効率化も可能になりますので、ぜひこちらの記事を参考にしてみて下さい。