Css3は2つのクラスを使用して要素を選択します

Question

2つのクラスを使用して要素を選択しようとしましたが、何らかの理由で機能しませんでした。

私は幅を変更したいので、大3を選択しようとしています。とにかく

私が書いたCSSコード：

.plans.large-3 { 
    width: 30% !important; 
} 

コード全体を！

<section> 
     <div class="row"> 
      <div class="large-12 medium-12 small-12 columns plans"> 
       <div class="large-12 medium-12 small-12 columns plans_title"> 
        <h5>Price</h5> 
        <h2>Your Plan</h2> 
        <i class="fa fa-bar-chart" aria-hidden="true"></i> 
       </div> 

       <div class="large-3 medium-4 small-4 columns plans_price"> 
        <h5>Test</h5> 
        <h5>5 Days</h5> 
        <h1>Free</h1 
       </div> 
      </div> 
     </div> 
    </section> 

Answer 1

：

.plans > .large-3 { 
 
    width: 30% !important; 
 
    border: 1px solid red; 
 
}

<section> 
 
    <div class="row"> 
 
    <div class="large-12 medium-12 small-12 columns plans"> 
 
     <div class="large-12 medium-12 small-12 columns plans_title"> 
 
     <h5>Price</h5> 
 
     <h2>Your Plan</h2> 
 
     <i class="fa fa-bar-chart" aria-hidden="true"></i> 
 
     </div> 
 

 
     <div class="large-3 medium-4 small-4 columns plans_price"> 
 
     <h5>Test</h5> 
 
     <h5>5 Days</h5> 
 
     <h1>Free</h1 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

それはクラス.plansを持つ要素の直接の子孫であるクラスlarge-3を持つ要素を選択します。詳細については、MDNのchild selectorsを参照してください。

Answer 2

cssで大規模な3と大規模な計画の両方を実行したい場合は、2を区切るカンマが機能します。このよう

.plans .large-3 { 
 
    width: 30% !important; 
 
    background-color: #CCC; 
 
}

<section> 
 
    <div class="row"> 
 
    <div class="large-12 medium-12 small-12 columns plans"> 
 
     <div class="large-12 medium-12 small-12 columns plans_title"> 
 
     <h5>Price</h5> 
 
     <h2>Your Plan</h2> 
 
     <i class="fa fa-bar-chart" aria-hidden="true"></i> 
 
     </div> 
 

 
     <div class="large-3 medium-4 small-4 columns plans_price"> 
 
     <h5>Test</h5> 
 
     <h5>5 Days</h5> 
 
     <h1>Free</h1 
 
     </div> 
 
    </div> 
 
    </div> 
 
     <!-- ****************** not in plans class ******************** --> 
 
     <div class="large-3 medium-4 small-4 columns plans_price"> 
 
     <h5>Test</h5> 
 
     <h5>5 Days</h5> 
 
     <h1>Free</h1 
 
     </div> 
 
    <!-- ****************** not in plans class ******************** --> 
 
     
 
</section>