はじめに
CSSやBootstrapを使用していてよくあるデザインが反映されない問題について、文法間違いやパスの指定など色々な原因がありますが、CSSセレクタの優先順位が関係していることがよくあるのでまとめます。
CSSの優先度
CSSの記述がうまく反映されないとき、文法の間違いもなく、パスの指定も問題ないという場合はより優先度の高いCSSがどこかに記述されている可能性が高いということです。
またBootstrapなどのフレームワークを採用していたら、!important句でスタイルを強制されている可能性が高いです。
CSSは複数箇所で同じタグに対し、競合した内容を書けてしまいます。
例えば以下のように。
p{
color:red;
}
p{
color:blue;
}
この場合、pタグのスタイリングはどうなるのでしょうか。
CSSには、競合するスタイリングをしたときにどのスタイリングが採用されるかの基準である「優先度」が存在します。
CSSは(同じ詳細度なら)より後ろに記述したスタイリングを適用するので、color:blueが適用されます。
次に位置によらない「タグへのセレクタの指定の度合いの詳しさ」である「詳細度」が関係します。
全称セレクタ＜タイプセレクタ＜クラスだけ＜クラスと要素＜id＜idと要素＜!importantを付加したプロパティ
の順で、右に行くほど詳細度は高くなっていき、最も詳細度の高いスタイリングが適用されます。
CSSを以下のようにしたとき
/*要素を特定したidセレクタ*/
p#hoge {
color: red;
}
/*要素を特定しないidセレクタ*/
#hoge {
color: blue;
}
/*要素を特定したclassセレクタ*/
p.fuga {
color: yellow;
}
/*要素を特定しないclassセレクタ*/
.fuga {
color: green;
}
/*タイプセレクタ*/
p {
color: orange;
}
/*全称セレクタ*/
* {
color: purple;
}
<!-- p要素にはid属性とclass属性を同時に指定する -->
<p id="hoge" class="fuga">何色になる?</p>
HTMLの文字色は、最も詳細度の高い「idと要素」のスタイリングである赤色が適用されます。
なお、前述の通り同じ詳細度のセレクタ同士ならCSSファイルのより後ろに書いたものが、またHTML内で後に読み込んだものが優先されます。
よって、質問のような状況では「より詳細度の高い指定が既に他の場所に記述されてしまっている」ことがまず考えられるので、タグに適用されているCSSを全て確認してみましょう。
タグに適用されているスタイリングは、Chromeブラウザならコンソール画面→Stylesメニューから確認できます。
!important
!important句は、セレクタの詳細度や位置に関わらず「プロパティを最優先で変更する」命令です。
以下のように詳細度の最も低い全称セレクタに書いたプロパティでさえ、最優先で適用させることができてしまいます。
* {
color: black !important;
}
!important句とフレームワーク
もしサイトにBootstrapやMaterializeなどのCSSフレームワークを採用している場合には、オリジナルスタイルの扱いが難しくなります。
なぜならこういったフレームワークは、「フレームワーク側のソースコードでスタイルを!important句を用いて固定している」ことが多いためです。
こちら側から通常の方法で競合するスタイリングをしていては、フレームワーク側のスタイリングが優先されてしまいます。
解決策としては
- オリジナルスタイリング側でも
!important句を使う - フレームワークを採用しない
- フレームワークを(CDNではなくダウンロードして使うことを前提に)改造し、
!importantの記述を取り除く - フレームワークのスタイリングに従い、オリジナルのスタイリングを諦める
方法があります。
2や4が初学者向きの解決策ですが、どうしてもフレームワークとオリジナルスタイルを共存させたいのであれば1または3を検討しましょう。
参考
この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。