CSSは階層が深い方の優先度が高くなる

こんにちは！

今回はCSSは階層が深い方の優先度が高くなるということについてまとめます。

問題

• レスポンシブなページを作っているときに、メディアクエリで正しくクラスを指定しても反映されない

解決方法

• メディアクエリを使用していない箇所と同じ階層構造で指定する
  • 階層構造が深い方が、優先度が高いため

例

header {
  .mobile-header {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .mobile-header {
    background-color: red;
  }
}

• 上記の例は、通常サイズではheader -> .mobile-headerという階層構造で青を指定
• メディアクエリの中では、.mobile-headerだけの階層構造で赤を指定
• この指定方法だと、メディアクエリの適用サイズでも青から変わらない

優先度を考慮した指定

header {
  .mobile-header {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  header {
    .mobile-header {
      background-color: red;
    }
  }
}

• 通常サイズと同様に、header -> .mobile-headerという階層構造になるように指定すると、想定通りの動きになる

おわりに

今回はCSSは階層が深い方の優先度が高くなることについてまとめました。レスポンシブ対応をしようとするときに、結構ここで詰まることがあったので忘れないようにしたいと思います。特に、CSSでネストすることが出来るようになってから、階層が深くなりがちなので気を付けたいです。

87/100