べにやまぶろぐ

技術寄りの話を書くつもり

CSS で !important 指定されたスタイルをさらに上書きしたいときはセレクタを詳細にしてみよう

Bootstrap 3 と jQuery DataTable と更に FixedColumns を使ってスクロール可能なテーブルを作った際、thead と tbody の間に下図のような空白ができてしまいました。

f:id:beniyama:20140821003042p:plain

これどっから来てるのかなと思って調べているとどうも jquery.dataTables.bootstrap.css で指定されている様子なんですが、

table.dataTable {
  margin-top: 6px !important;
}

というように !important 指定されています。

!important 乱舞はアンチパターンなんだろうなと思いつつも bower でせっかく管理しているのでサードパーティのライブラリは直接編集したくない、ということで別 CSS ファイルから上書きたいところなんですが !important を打ち消す方法がわからない…

と更に調べてみると

6px gap when using DataTables with Bootstrap 3 · Issue #35 · mkoryak/floatThead · GitHub

というやり取りを発見。

You can override !important styles with a more specific selector with another important style.

ということで、更に詳細なセレクタで指定してやることで !important を超えた !important を設定することができました。

このようにセレクタの詳細さで優先順位を決定することを CSS の固有性 と言うそうです。セレクタ内に存在する ID の数、クラスの数、そして要素の数それぞれに重み付けをして計算した値が優先度とされるらしく、!important が複数競合した場合でもそのルールが適用されるということのようです。

正直 CSS は乱雑にしか書けない自分ですが一つ勉強になりました。

参考)