メディアクエリに関する質問です。

例えば、下記のようなコードがあるとします。

HTML
1<div class="class_01 class_02 class_03 class_04">sasa</div>

CSSファイルの中では、

CSS
1.class_01.class_02{
2	text-align:left;
3}
4
5@media screen and (max-width:1024px) {
6	.class_01.class_02{
7
8		text-align:center;
9		/*（※）この部分を実行させることができない。*/
10
11	}
12}

というふうにwidthによってCSSを分岐させています。

しかしながら、これですと動きません。1024pxより小さいと、（※）の部分のスタイルに変わるようにしたいのですが、できません。

ただ、回避策はあります。以下の2つなら動くようです。

CSS
1.class_01.class_02{
2	text-align:left;
3}
4
5@media screen and (max-width:1024px) {
6	.class_01.class_02.class_03.class_04{
7
8		text-align:center;
9		/*これだと動く。*/
10
11	}
12}

CSS
1.class_01.class_02{
2	text-align:left;
3}
4
5@media screen and (max-width:1024px) {
6	.class_01.class_02{
7
8		text-align:center !important;
9		/*これだと動く。*/
10
11	}
12}

ですが、少し問題があります。それはclass_03の名前が色々と変わるのです。

ですので、class_03、class_04を指定しなくとも、class_01とclass_02のみでメディアクエリを動かせないでしょうか？

また、importantの乱発は良くないでしょうか？

まさかとは思いますが、@media screen and…の中では4つのクラスのすべてを指定していないと動かないとは思いませんでした。
@media screen and…の外であれば、4つのうち2つのクラスを指定するだけでもスタイルが適用されるようです。

m.ts10806

2019/11/14 04:37

メディアクエリに関する質問がこれっきりにならないのでしたらタイトルはもっと固有のものとなるよう要件を記載してください

行動規範の内容に同意します

回答2件

しかしながら、これですと動きません。1024pxより小さいと、（※）の部分のスタイルに変わるようにしたいのですが、できません。

再現しません。書かれていないコードが影響しているものと思われます。

jsFiddleで意図通り動作しています

投稿2019/11/14 04:45

編集2019/11/14 04:50

maisumakun

総合スコア145971

ベストアンサー

!importantをつけることで意図したとおりになるのであれば
CSSの詳細度が原因のようですが、見た感じ最初の記述で動くはずなので不思議ですね。。

CSSの記述順もいただいたソースコードのように上からメディアクエリなし→メディアクエリなしになっているのですよね？(Scssなどで出力されたときに順序が変わったりしていないですよね？)

取り急ぎスタイルをあてたいようでしたら下記のようにどちらもメディアクエリを適用すればいけるかもしれません。

@media screen and (min-width:1025px) {
 
    .class_01.class_02{
        text-align:left;
    }
}

@media screen and (max-width:1024px) {
    .class_01.class_02{

        text-align:center;

    }
}

!importantは最後の手段ですのでこれを使うよりは.class_03などで詳細度を上げるほうがよいと思います。

投稿2019/11/14 04:53