CODEWITHSUNDEEP
htmlcss
Bitwise
Bitwise

Reputation: 8461

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?

Upvotes: 3

Views: 658

Answers (3)

Steve
Steve

Reputation: 9583

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.

Upvotes: 3

Alex
Alex

Reputation: 6047

 .plan-price {
    float: right;
    margin: 83px 20px 20px;
}
 .private-eye {
      margin: 40px;
 }

 .little-birdy {
      margin: 50px;
    }

Upvotes: 0

Kevin
Kevin

Reputation: 99

To differentiate the divs, give them id's. id = "whatever". Classes are used to make the divs have the same css styles when they are named the same class, but id's are used to style it individually. In your css file do #id { code }

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

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


#something{
code
}

#somethingElse{
code
}

Upvotes: 0

Related Questions