Two classes in one div, best approach - CSS - html

Question

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>Select</p>
</div>
<div class="price-plans little-birdy">
<p>Select</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 1

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>Select
</p>
</div>
<div class="price-plans little-birdy">
<p>Select
</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.

Answer 2

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>Select</p>
</div>
<div id = "somethingElse" class="price-plans">
<p>Select</p>
</div>
#something{
code
}
#somethingElse{
code
}

Answer 3

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