CSSのスタイルやセレクターの優先順位とその上げ下げをする方法

こんにちは、Mochiです。

複数のスタイルを指定した場合って、どれが優先されるんだろう？スタイルがうまく反映されない…スタイルの優先順位ってどうなっているんだっけ？🤔

そんな方に向けて、スタイル・セレクターの優先順位をわかりやすく解説します。そして、優先順位をあげたり下げたりする方法についても触れていきます。

では、さっそく学んでいきましょう！

🤔スタイル・セレクターの優先順位

基本的なスタイル・セレクターの優先順位は次のようになっています。

それぞれの優先順位とスタイルやセレクターのHTML、CSSの書き方を確認しましょう。

優先順位 - 1位：!important

h1 {color: blue !important;}

優先順位 - 2位：インラインスタイル

<h1 style="color: red">Mochi Blog</h1>

優先順位 - 3位：IDセレクター

<h1 id="sample">Mochi Blog</h1>
#sample {color: blue;}

優先順位 - 4位：クラスセレクターと擬似クラスセレクター

<h1 class="sample">Mochi Blog</h1>
<a>Mochi Blog</a>
.sample {color: red;}
a:link {color: green;}

優先順位 - 5位：要素型セレクター

h1 {color: blue;}

優先順位 - 6位：ユニバーサルセレクター

* {color: gray;}

それぞれのセレクターは記事「CSSセレクターとは何か、基本的な種類や書き方をわかりやすく解説」を読むことで深く理解できるので、曖昧な方には読むことをおすすめします。

また、インラインスタイルは記事「CSSの適用方法やファイルの読み込み方をわかりやすく解説」で説明しているので、こちらも参考にしてみてください。

これらの優先順位は厳密には点数計算で決まっていきますが、覚える必要性は高くないため、本記事では省略します。これらの順番をざっくりと押さえていれば十分です。

では、いくつかの例を見て理解を深めていきましょう。

まず、1つ目の例はこちらです。

<h1 id="id-example1" class="class-example1">Mochi Blog : Example1</h1>
h1 {
  color: red;
}

#id-example1 {
  color: green;
}

.class-example1 {
  color: blue;
}

この例では

• 要素型セレクター
• IDセレクター
• クラスセレクター

が出てきています。先ほどの図を見てどれが優先されるのか考えてみましょう。

準備はよろしいでしょうか？

答えは、1番優先順位が高いのはIDセレクターのため、IDセレクターで指定した色が反映されます。

次に、2つ目の例はこちらです。

<h2 class="class-example2">Mochi Blog : Example2</h2>
h2 {
  color: red !important;
}

* {
  color: green;
}

.class-example2 {
  color: blue;
}

この例では

• !important
• ユニバーサルセレクター
• クラスセレクター

が出てきています。こちらも先ほどの図を見てどれが優先されるのか考えてみましょう。

準備はよろしいでしょうか？

答えは、1番優先順位が高いのが!importantのため、!importantで指定した色が反映されます。

では次に、同じセレクターで何度も指定した場合はどれが優先されるのか学んでいきましょう。

同じセレクターの優先順位

同じセレクターで複数回指定した場合には、下に書かれているスタイルが優先されます。

<h1 class="class-selector">Mochi Blog</h1>
.class-selector {
  color: red;
}
.class-selector {
  color: green;
}
.class-selector {
  color: blue;
}

下に記述したスタイルが優先されるのは、どのセレクターにおいても共通です。

ではこれらの優先順位を踏まえて、優先順位を上げ下げする方法を学んでいきましょう。

✍️優先順位を上げ下げする方法

まずは優先順位を上げる方法を見ていきましょう。

優先順位を上げる

優先順位を上げるためには、2つの方法があります。

1つ目の「優先順位の高いセレクターに変更する」では、優先順位のルールをもとにセレクターを変更します。

1番手っ取り早いのは!importantを使うことです。ただし、この方法はおすすめしません。理由はCSSが複雑になってしまうためです。あとでより優先したいスタイルが出てきた時に!importantの箇所を探して、消して…という処理をするのは大変です。

そのため、2つ目の「スタイルの記述位置を下にする」がおすすめです。下に行くほど優先されることから、新しいスタイルの優先度を上げたい場合、下に書くだけで簡単に実現できます。

優先順位を下げる

優先順位を下げるためには、同じく2つの方法があります。

1つ目の「優先順位の低いセレクターに変更する」では、優先順位のルールをもとにセレクターを変更します。

簡単にできるのはユニバーサルレクターにスタイルを記述することです。特に「あとで変えるだろうけど、とりあえず初期状態として装飾しておこう…🧐」という際に有効です。

2つ目の「スタイルの記述位置を上にする」では、どこに入れるかがややこしいですが、位置を変えるだけで優先度を低くすることができます。

🎉まとめ

今回はスタイル・セレクターの優先順位とその優先順位を変更する方法を学びました。優先順位はスタイル・セレクターごとに決まっており、同じセレクターの場合は下に書くほど優先されます。

なかなか一度に優先順位を完璧に覚えるのは難しいかと思います。ぜひ図を繰り返し見るなど、このサイトを活用してみてください。

CSSを覚えていき、後々はもっと稼げるようになりたいという方は次の記事を参考にしてみてください。
🫱 ゼロからプログラミングで稼げるようになるまでのロードマップ

また、もっと効率的なプログラミングの学び方を知りたい方は次の記事も読んでみるのがおすすめです。
🫱 プログラミングの効率的な学び方｜エンジニアの実体験から