同じクラスに違うスタイル & 同じ要素に複数クラスを指定して条件に応じスタイルを変えるには?

Question

<style>
     @media (min-width: 768px){    /* max-width: 768pxになった場合も*/ 
       .classA { 
               width: 100%;
               /*その他処理*/
       }
 }
       .classB {
               width: 50%;
               /*その他処理*/
       }
</style>
<div class="classA classB>Am I div?</div>

簡単に書くとこんな感じなんですが、この場合**<div class="classA classB>Am I div?</div>**はどうなるのですか？

<style> 
    .classC {
          width; 500%;
          float: left;
     }
@media (min-width: 968px) {   .classC { width: 70%; float: left;} }
@media (min-width: 768px) {   .classC { width: 100%} }

</style>
<div class="classC>I am a div!</div>

このように同じクラスに複数スタイルが振り分けられていてもしっかりと処理をしてくれるのですか？
グリッドシステムの実装を目指しています。

Answer 1

カスケード規則によってセレクタの優先度が決まります。
.classA, .classB の セレクタの詳細度 は同値の為、後から定義した .classB が優先されます。
検証してみると分かると思います。

Comments

[退会済みユーザー]

ありがとうございます!