user2565853 user2565853 - 1 month ago 6
CSS Question

Css3 select an element using 2 classes

I tried to select an element using 2 classes, but it didn't work for some reason!.

I'm trying to select the large-3, because I want to change the width.

Anyway the css code I wrote:

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


The whole code!

<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

Like this:

.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>

It will select the elements with class large-3 that are direct descendants of elements with class .plans. See child selectors on MDN for more info.

Comments