こんにちは！インターン10月生ニシグチです！
レスポンシブに挑戦しているのですが、CSSをタブレット用、スマホ用と読み込んでいるので、CSSの数が多くなります。
そしてなかなか思うようにいかず、四苦八苦しております。
今日やってしまった事なのですが、プロパティやらの記述は合っているハズなのに、全然思うようにいかない…。どこがミスしているのかと探しまくりましたが、やはりわからない。
そしてしばらくしてからミスに気付きました。セレクタの優先順位でした。
簡単に例として書きますと、
<div id=”box”><p class=”hako”>はこ</p></div>
という記述があったとして、メインのCSSには
div#box {background-color: #aaa;}
と書き、背景をグレーにしていたとします。
そして、メインのCSSの後にタブレット用のCSSを読み込み、タブレット用では#boxに次のような、背景を白にする指定をします。
#box {background-color: #fff;}
わかりましたか？
これでは背景は変わらず、グレーのままになります。
CSSは、後に読み込んだ指定が読み込まれ、上書きしていくのですが、これは上書きされません。
原因はCSSセレクタの点数です。
セレクタには、それぞれ点数というものが存在します。
全称セレクタ 例(*
0点
タイプセレクタ 例(pやulなど
1点
疑似要素 例(:first-childなど
1点
classセレクタ 例(.hakoなど
10点
idセレクタ 例(#boxなど
100点
要素に直書き 例(style=””
1000点
となっています。
これの合計点数が高いものが優先されます。
なので先ほどの例を見ると、
div#boxはdivの１点と、#boxの100点で101点。
後に書いた#boxは100点なので、101点のdiv#boxの指定が優先されます。
#box p.hako などと書くと111点になります。
つまり先ほどのbackground-color: #fff;で背景を白にするには、
div#box {…と書くか、#aaaを指定したセレクタのdivを消せばCSSが上書きされ、#fffが適応されます。
なので、優先順位を高めにしたければセレクタを細かく指定していけば良いワケなんですが、最終奥義があります。
!important
こいつはほぼ全ての優先順位を吹っ飛ばして適応されます。
なので、
body div#box p.hako {background-color: #aaa;}
と書いていたとしても、
p {background-color: #fff !important; }
と書けば、#fffが適応され白くなります。
しかし、!importantが他にあり均衡したりすると、意図しない適応などします。
優先順位をしっかりすれば、こいつは使わなくも良さそうなので、あくまでも最終手段として使うのが良さそうです。逆に!importantが付いていて他の指定ができないなんて事もあるみたいなんで。
というワケでCSSの優先順位の話でした。
それでは今日はこの辺で失礼します。
ニシグチ