特定のdivメディアクエリの親要素のクラススタイルを変更する

Question

私の.container要素のサイズを900pxの画面サイズに達すると100％にします。問題は、すべてのページで.containerを使用し、＃sub-top div内の.containerの外観にのみ影響を与えたいということです。

私にとって最も難しいのは用語ですが、これは私が記述する能力に最も近いと思います。

下記のように、900px以下の画面サイズに達したときに、.containerクラスが85％ではなく100％になるようにしようとしています。

@media 
 
.container{ 
 
width: 85%; 
 
height: auto; 
 
} 
 
#sub-top{ 
 
background-color: gray; 
 
height: auto; 
 
} 
 

 
@media (min-width: 900px) { 
 
#sub-top .container { 
 
width: 100% !important; 
 
height: auto; 
 
    } 
 
}

<div id="sub-top"> 
 
    <div class="container"> 
 
\t <div class ="content"> \t 
 
     <p> HERE IS CONTENT </p> 
 
\t </div> \t 
 
    </div> 
 
</div> 
 

 

 

 

 

 

Answer 1

をこの作品：！

.container { 
    width: 85%; 
    height: auto; 
    background-color: gray; 
} 

#sub-top { 
    height: auto; 
} 

@media (max-width: 900px) { 
    #sub-top .container { 
    width: 100% !important; 
    height: auto; 
    } 

Answer 2

代わりにこれを試してみてください：

@media screen and (max-width: 900px) { 
    #sub-top .container { 
    width: 100%; 
    height: auto; 
    } 
}