こんにちは。
前回に引き続き、新米コーダーの私が、新人教育で役立ちそうな記事をかいてみたいと思います。

半年前の自分を振り返ったところ、CSSのスタイルが効かなくて悩んだり、よくわからないけどimportantを使いまくっていたり、CSSの優先順位でつまづいたな～ということを思い出したのでちょっとまとめてみました！

CSSの優先順位って？

例えば、こんなHTMLがあったとします。

<div class="colorBox">
<p id="txtBox" class="txt">BRIDGE BLOG</p>
</div>

ここに、以下のcssを適用すると、どうなるでしょうか。

p{
background: blue;
}
p{
background: red;
}

青と赤が混ざって紫色･･･というわけではなく、どちらかの色が適用されるのです。
この、いったいどのような場合にどれが優先して適用されるのかについて、以下で紹介していきます。

1.基本的な優先順位

p{
background: blue;
}
p{
background: red;
}

先ほどのものと同じソースですね。
このように、続けて記述した場合は後に書かれたものが優先されます。
なのでこの場合の背景色は赤色になります。

2.classセレクタ

p{
background:red;
}
.txt{
background:blue;
}

先ほどご覧頂いたように、タグに直接CSSを適用したものと、classに適用したものの2つを比較してみます。

こちらは青になりました。

3.親要素と一緒に指定

.txt{
background:blue;
}
.colorBox p{
background:green;
}

次は、先ほど優先されなかったpの方に親要素のclassセレクタを入れて比べてみます。

今度は親要素を指定したpが優先され、緑になりました。

4.idセレクタとclassセレクタ

.txt{
background:blue;
}
#txtBox{
background:green;
}

今度はidセレクタとclassセレクタを比較してみます。

こちらはidセレクタが優先されて緑になりますね。

まとめ

以上をまとめてみると･･･

1.基本的な優先順位
先に書いたもの＜後から書いたもの

2.classセレクタ
タグ指定＜class指定

3.親要素と一緒に指定
タグ指定＜class指定＜親要素と一緒に指定

4.idセレクタとclassセレクタ
タグ指定＜class指定＜id指定

となりますね。
このように、CSSでは後から書いたものや、より詳細に記述したものが優先されます。
優先のルールについては、ポイント獲得にたとえると分かりやすいです。

p（タグに直接指定した場合） １ポイント
.txt（classの場合） 　　　　 １０ポイント
#txtBox（IDの場合） 　　　 １００ポイント

というように、獲得ポイントが多いほど優先されるというわけです。
このポイントは、セレクタを並べるごとに加算されていくので、より詳細に指定すると優先順位が上がります。

ですので「3.親要素と一緒」に指定を例に挙げると、

.txt　　　　　１０ポイント
.colorBox p　 １０ポイント+１ポイント

このように、親と一緒に指定したことで１ポイント加算され、優先されたということです。

参考：http://www.stylish-style.com/csstec/base/order.html

!important

最後に、最終手段「!important」をご紹介します。
この「!important」をつけると、先ほどのルールをふっとばして優先されます。

p{
background:red!important;
}
.txt{
background:blue;
}

.txt{
background:blue!important;
}
#txtBox{
background:green;
}


ですが、むやみにこれを乱用してしまうと、「!important」が「!important」を上書きするようなよくわからないCSSになってしまうという危険があります。
優先順位のルールをしっかり理解していればむやみに使う必要もありませんし、「!important」は最終手段として利用するようにしましょう！

最後に

いかがでしょうか。
優先順位のルールを理解しておくと、スタイルを記述しているのに効かない･･･なんて悩みも減りますね！
是非、この優先順位を頭に入れてコーディングしてみて下さいね。

 

CSSビギナーの方には、こちらの記事もおすすめです！
新米コーダーシリーズ(6)CSSの基本概念「ボックスモデル」の考え方
https://web.bridge-net.jp/blog/1205/
新米コーダーシリーズ(8)初心者がつまずくcssによる中央寄せ
https://web.bridge-net.jp/blog/1260/

お問い合わせ