cssの優先順位についてわからない点がございます

Question

以下のようなCssを記述したところ、メディアクエリでの設定が反映されず、
デベロッパーツールで確認したところ、メディアクエリのpaddingに打ち消し線が
引かれていました。

これは優先順位の問題なのでしょうか？

尚、「 .info .container .price　」の最初の「.info」を消したところ
メディアクエリの設定がしっかり反映されました。

.info .container .price{
  padding: 16vmin 6vmin 20vmin;
}

@media screen and (min-width:840px) {
  .container .price{
    padding: 64px 24px;
  }
  }

Answer 1

CSS の当てられる優先順位というのは詳細度というもので決められます。
詳細度 - CSS: カスケーディングスタイルシート | MDN
.info .container .price の詳細度は 30 ですが .container .price は 20 なので必ず前者が上になります。メディアクエリは詳細度に影響しません。メディアクエリが効いた場合、「詳細度が同じ場合後から宣言されているスタイルシートが優先される」というルールに基づいて後者のスタイルが当てられた、というわけです。

Comments

[actlikeJohnnys]

メディアクエリは詳細度に影響しないんですね！！
ググっても正確な答えを探せなかったので、ためになりました。

ありがとうございました！

Answer 2

CSSには詳細度という概念があります。

.info .container .priceの方が.container .priceより詳細度が高いので、.info .container .priceが優先されます。

エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita

尚、「 .info .container .price　」の最初の「.info」を消したところ

メディアクエリの設定がしっかり反映されました。

詳細度が同じになったので、後から記述したものが適用されます。

Comments

[actlikeJohnnys]

詳細度について改めて勉強しなおすと同時に、セレクタの記述方法も意識すべき
点だと感じました。

ご回答、ありがとうございました！