はじめに

株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。

オフィスが移転し二週間がたちました。

文京区は神田に比べて子供の姿をよく見ます。

少なくとも神田でベビーカーを見た記憶がないのでしみじみと地区による差を感じています。（さすがに記憶にないだけですれ違ったりはしていたのだと思いますが。）

さて、今回はcssのセレクタの詳細度の概要（とデバッガ？）について書きます。

CSSが反映されないとき。

cssを触りだすと、反映してほしい指定が来ないことがあります。

（赤くなってほしいところが赤くならない等々。）

大体そういう時は

・その指定を反映させるための条件が足りていない。

・よその指定が反映したい指定を打ち消している。

あたりだったりします。

そんなときはCSSがimportantまみれになる前に要素の指定の方法を見直していきます。

状況の確認方法（chrome ディベロッパーツール）

選択中の要素にどんな指定がされているかは下記の手順で確認できます。

・調べたい要素を右クリック。
・出てきたメニューから検証を選択。
・ディベロッパーツールが要素を指定した状態で開きます。
（選択中の要素はelements内をクリックするなどで変更可能。）
・右のエリアのstyleの項目に表示されているのがその要素についているcssです。

※手順の記載の都合でchromeで書きましたが大体のブラウザで同様のことができます。

ディベロッパーツールで要素を選択しているのにかけたはずの指定が見つからないときはcssのリンクや指定で間違いがあるかもしれません。スペルの間違いや、ファイルのパス等そのほかの部分が違う可能性の方が高そうです。

指定した項目に打消し線（文字にかぶさる横線）が入っていて反映されないという場合。おそらく詳細度で何とかできる問題です。

重複した指定と詳細度の関係

cssではそれぞれ数値が割り振られており、それを合算した結果でcssで使われる指定が決まります。

割り振られている値を詳細度と呼びます。

ですので設定したい項目が何かに打ち消されている場合は打ち消している項目よりも反映させたい項目が詳細度が高くなるように指定すれば解決します。

厳密な指定がいる場合は詳細度の数値、計算方法について調べてみてください。

計算するサイトや、詳しいサイトありますのでいろいろ見てみるのがいいと思います。

また、厳密な計算が必要なほど込み入っているのであればスコープや設計を見直たほうが早いかもしれません。

要素の詳細度について

さて、以下詳細度が高い順に記述すると

1.important

記述例

css

.btn-red{
　　background:red !important;
}


2.htmlのタグに直接書かれるスタイル
記述例
html
<div style="background:red"></div>;

3.idにあてられたスタイル
記述例
html
<div id="red-btn"></div>;

css
#red-btn{
   background:red !important;
}

4.クラスへあてられたスタイル
記述例
html
<div class="red-btn"></div>;

css
.red-btn{
　　background:red !important;
}
5.その他
疑似要素などありますがこの辺りの衝突はあまり見ないのと、大体他のクラスにつけて記述することが多いと思いますので省略します。
尚、同じ詳細度の指定が複数個所にあった場合は後に読み込まれる方が優先されます。
一応優先度の反映のされ方をざっくり書くと
優先度が高いものが反映されますので、importantが赤といえば他が何を言っても赤です。
importantがいないときはタグに書かれたスタイルが優先されます。
importantの指定もタグの指定もなければidの指定が優先されます。
そのすべてがいないときはclass、classさえいないときはその他疑似要素等への指定が使われます。
ここまで把握したら反映させたい項目を邪魔している指定を見てみます。
詳細度が反映させたい要素より高いはずです。
自身の詳細度を高める、相手方の詳細度が不必要に高いときは下げるなどして調整すれば正しく反映されます。
終わり
詳細度についていろいろ書きましたが、厳密に調整しないといけない状況はなかなか大変なので設計で何とかできるようになりたいです。
補足（Chromeディベロッパーツール）
ディベロッパーツールのstyleではスタイルの左に表示されるチェックボックスのオンオフでスタイルの着脱ができます。

衝突している指定についてブラウザ上で相手側の指定をオフにして試してみることができます。

同じスタイルの指定が複数個所にされていて反映されない場合はディベロッパーツールであらかじめみることができます。