Cameron Bass Cameron Bass - 1 month ago 5
HTML Question

Two classes in one div, best approach - CSS

I'm still new to styling with CSS. Here is my situation, I have three elements I want to one style. But each one needs small adjustments. So I gave each element the class of

plan-price
and then I gave them each a unique second class. Then I'm trying to nest the second class within the first. But that approach is not working. I'll show my code for clarity.

HTML



<div class="price-plans private-eye">
<p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a></p>
</div>

<div class="price-plans little-birdy">
<p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a></p>
</div>


CSS



.plan-price {
float: right;
margin: 83px 20px 20px;

.private-eye {
margin: 40px;
}

.little-birdy {
margin: 50px;
}

}


As you can see my attempt is to nest the second class within the first. I realize now that this does not work. What is another way I can do this?

Answer

CSS by itself does not support nesting styles like this. You could just have the override styles after the "default" style and rely on the cascading nature of CSS to overwrite the margins.

.plan-price {
  float: right;
  margin: 83px 20px 20px;
}
.plan-price.private-eye {
  margin: 40px;
}
.plan-price.little-birdy {
  margin: 50px;
}
<div class="price-plans private-eye">
  <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a>
  </p>
</div>

<div class="price-plans little-birdy">
  <p><a href="/account/sign_up?plan=little_birdy" class="button-big reverse-blue">Select</a>
  </p>
</div>

To do nesting styles, take a look at a CSS pre-processor like LESS which lets you do exactly what you are after.