どうも、僕です。
毎年のバンクーバーの寒さに心折れながらも、「東京の方がもっと寒かったな〜」とか懐かしみながら生活しているこの頃です。
今回は、「CSSセレクタの優先順位」をテーマにして書いていきたいと思います。
自分もたまに「あれ、これどっちが優先されるんだっけ？」とか「なんでこのスタイル効かないんだよ！！！！！」ということが起きるので、復習もかねて気合入れて書きます。
目次
- CSS 優先順位の基本
- CSSセレクタの種類
- CSSセレクタの優先順位
- まとめ
CSS 優先順位の基本
CSSの書き方による優先順位
1.Body内のタグにsytle=””って直接記述するやつ
2.headタグ内にstyleタグで囲って記述
3.外部のCSSファイルに記述し、読み込む
ってのがあるのですが上から順に優先順位が高くなっています。つまりBody内のタグに直接記述が優先度が一番高いわけです。
例：
<p style="font-size:15px;">サンプルコード</p>
CSSの記述場所による優先順位
これもたまに忘れがちなのですが、後に書かれたものが優先されます。
例：
.test{
color:blue;
}
.test{
color:red;
}
こうなった場合は下のスタイルが適用されるのでtestクラスの文字は赤色になります。
Important
これは最終奥義になります。
僕はこいつの記述を見た瞬間に僕はやる気が失せます。
例：
p{
margin:30px 0 !important;
}
#content #post #post-description p{
margin:0;
}
上記のコードでは上のスタイルが適用されます。Importantを使用したらclassとかIDとか関係なく、その要素の優先順位がMAXになるわけです。
ワンパンマンのサイタマ並みにめちゃくちゃ強いんです、Important。
ですので「Important」は出来る限り使用は控えるようにしてください。
Importantを使わなければいけないとなったら、HTMLの構造や他のCSSの書き方を変更することである程度は対応できるはずなので、最終奥義はちゃんと取っておきましょう。
たまに他人がやったコードを引き継いでやるときとか、「なんでここImportant使ってんだよ、全然Importantじゃーねよ」って思うときがあります。
とまぁこれがCSSの優先順位の基本になります。
問題は次のCSSセレクタによる優先順位ですね。
CSS セレクタの種類
下記がCSSのセレクタ一覧になります。
・全称セレクタ
・タイプセレクタ
・擬似要素
・擬似クラス
・Classセレクタ
・Idセレクタ
なんかこう言われると全然「？」な感じな人もいると思うので、上から順に説明していきたいと思います。
1.全称セレクタ
「*」全てに効くやつです。
*{
color:red;
}
2.タイプセレクタ
要素を指定してあげるやつです。
p{
color:red;
}
3.擬似要素
どの要素の何番目とか要素の後とかにスタイル効かせるやつです。
擬似要素の詳しい説明については、「CSS 擬似クラス・擬似要素の使い方とまとめ」をお読みください。
4.擬似クラス
要素の状態に対してスタイル効かせるやつです。
擬似クラスの詳しい内容については、「CSS 擬似クラス・擬似要素の使い方とまとめ」をお読みください。
5.Classセレクタ
要素に対してクラスをつけてあげて、それに対してスタイルを効かせるやつです。
.sample{
color:red;
}
6.IDセレクタ
要素に対してIDを指定して、それに対してスタイルを効かせるやつです。
#sample{
color:red;
}
こう並べると色々なCSSセレクタがあるのがわかると思います。
これにも先ほどと同様、優先順位がありましてちゃんと意識して記述しないとめちゃくちゃなコードになってしまいます。
7.CSSセレクタの優先順位
基本的には先ほどのリストの上から下に向かって優先順位が高くなっていきます。
ここまでは簡単なのですが、CSS書くときってなかなかクラスだけとかにならないじゃないですか？
.header .menu ul li{
}
みたいな書き方とか普通にすると思うんですけど、このようなネストになってくるとややこしいわけですね。
もちろん、
.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やHTMlとか人それぞれ書き方は違うものなので、僕がいつも意識してるのは「メンテナンスしやすい」ってことをいつも念頭に置きながら記述してます。
また、ID指定やImportantを避けるとは別にクラス名のつけ方にも気を使った方がいいですね。一度自分の復習もかねてクラス名の書き方とかメンテナンスしやすいCSSの書き方を今度記事にしたいと思います。Sassとかでネストの記述が簡単に書けるようになった昨今ですが、無駄なネストによりメンテナンスしにくいコードになったりするので、そういうのを含めて記事にしたらみなさんのためになるかなーと思ってます。
とりあえず「CSSの優先順位」についての説明は終わりますが、来年も張り切ってメンテナンスしやすいコード書いていきましょう！！！！！！！
では。
