CSS 優先順位の基本・セレクタの優先順位

どうも、僕です。

毎年のバンクーバーの寒さに心折れながらも、「東京の方がもっと寒かったな〜」とか懐かしみながら生活しているこの頃です。

今回は、「CSSセレクタの優先順位」をテーマにして書いていきたいと思います。
自分もたまに「あれ、これどっちが優先されるんだっけ?」とか「なんでこのスタイル効かないんだよ!!!!!」ということが起きるので、復習もかねて気合入れて書きます。

目次

  • CSS 優先順位の基本
  • CSSセレクタの種類
  • CSSセレクタの優先順位
  • まとめ

CSS 優先順位の基本

CSSの書き方による優先順位

1.Body内のタグにsytle=””って直接記述するやつ
2.headタグ内にstyleタグで囲って記述
3.外部のCSSファイルに記述し、読み込む

ってのがあるのですが上から順に優先順位が高くなっています。つまりBody内のタグに直接記述が優先度が一番高いわけです。
例:

CSSの記述場所による優先順位

これもたまに忘れがちなのですが、後に書かれたものが優先されます。
例:

こうなった場合は下のスタイルが適用されるのでtestクラスの文字は赤色になります。

Important

これは最終奥義になります。
僕はこいつの記述を見た瞬間に僕はやる気が失せます。

例:

上記のコードでは上のスタイルが適用されます。Importantを使用したらclassとかIDとか関係なく、その要素の優先順位がMAXになるわけです。
ワンパンマンのサイタマ並みにめちゃくちゃ強いんです、Important。

ですので「Important」は出来る限り使用は控えるようにしてください。
Importantを使わなければいけないとなったら、HTMLの構造や他のCSSの書き方を変更することである程度は対応できるはずなので、最終奥義はちゃんと取っておきましょう。

たまに他人がやったコードを引き継いでやるときとか、「なんでここImportant使ってんだよ、全然Importantじゃーねよ」って思うときがあります。

とまぁこれがCSSの優先順位の基本になります。

問題は次のCSSセレクタによる優先順位ですね。

CSS セレクタの種類

下記がCSSのセレクタ一覧になります。

・全称セレクタ
・タイプセレクタ
・擬似要素
・擬似クラス
・Classセレクタ
・Idセレクタ

なんかこう言われると全然「?」な感じな人もいると思うので、上から順に説明していきたいと思います。

1.全称セレクタ

「*」全てに効くやつです。

2.タイプセレクタ

要素を指定してあげるやつです。

3.擬似要素

どの要素の何番目とか要素の後とかにスタイル効かせるやつです。
擬似要素の詳しい説明については、「CSS 擬似クラス・擬似要素の使い方とまとめ」をお読みください。

4.擬似クラス

要素の状態に対してスタイル効かせるやつです。
擬似クラスの詳しい内容については、「CSS 擬似クラス・擬似要素の使い方とまとめ」をお読みください。

5.Classセレクタ

要素に対してクラスをつけてあげて、それに対してスタイルを効かせるやつです。

6.IDセレクタ

要素に対してIDを指定して、それに対してスタイルを効かせるやつです。

こう並べると色々なCSSセレクタがあるのがわかると思います。
これにも先ほどと同様、優先順位がありましてちゃんと意識して記述しないとめちゃくちゃなコードになってしまいます。

7.CSSセレクタの優先順位

基本的には先ほどのリストの上から下に向かって優先順位が高くなっていきます。
ここまでは簡単なのですが、CSS書くときってなかなかクラスだけとかにならないじゃないですか?

みたいな書き方とか普通にすると思うんですけど、このようなネストになってくるとややこしいわけですね。
もちろん、

.header .menu ul li より

#header .menu ul li の方が優先度高いのはお分かりいただけると思います。

では、

#header p と

.header .content p の場合はどちらのCSSが優先されると思いますか?

答えは、#header pなんですね。

でも「.header」を使ってる方が階層を多く指定しているから優先順位が高いんじゃない?と思われますが、IDの方がクラスよりも優先順位が高いので、階層に関係なくIDを指定しているほうが必然的に優先度が高くなります。だからクラスが10個以上あろうとIDの方が優先されるわけです。

上記の理由から、僕はCSSではなるべくIDを使用してスタイルを適用することはしないようにしてます。
理由はあとで上書きするのが面倒になるからですね。とくにレスポンシブ対応する際のmedia-queryとか。

自分でもこの優先順位について感覚的に理解していた部分があったので調べていたら、

CSSセレクタの優先順位の計算方法

でとてもわかりやすく点数計算方式でCSSの優先順位についての記事が書かれているので是非一度ご覧になってください。

まとめ

以上CSSの優先順位についての説明と僕の愚痴を書きましたが、CSSやHTMlとか人それぞれ書き方は違うものなので、僕がいつも意識してるのは「メンテナンスしやすい」ってことをいつも念頭に置きながら記述してます。

また、ID指定やImportantを避けるとは別にクラス名のつけ方にも気を使った方がいいですね。一度自分の復習もかねてクラス名の書き方とかメンテナンスしやすいCSSの書き方を今度記事にしたいと思います。Sassとかでネストの記述が簡単に書けるようになった昨今ですが、無駄なネストによりメンテナンスしにくいコードになったりするので、そういうのを含めて記事にしたらみなさんのためになるかなーと思ってます。

とりあえず「CSSの優先順位」についての説明は終わりますが、来年も張り切ってメンテナンスしやすいコード書いていきましょう!!!!!!!

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。