Changing one part of a CSS class

Question

I have made some container classes in CSS which are quite large. One of my divs uses this container class, however I would like to change the padding from 10px; to 0px;. I do not want to create a whole new class for this. What is the most efficient way to do this?

An example of my div in html

<div class="my-container">
</div>

An example of my container class

.my-container
{
   lots of fields...
   padding:10px;
}

An example of what I want without creating a new class

.my-container
{
   lots of fields...
   padding:0px;
}

I do not want to create a whole new class for this. Are you saying this because you don't want to have to repeat everything in "lots of fields" for your new class? Because you can use a new class without having to repeat everything. — BSMP
– BSMP, Commented Jul 22, 2016 at 1:25

TTCC · Accepted Answer · 2016-07-22 01:44:34Z

1

You can add a new class with one line inherit .my-container, like this:

.my-container{
   border: 1px solid blue;
   background: red;
   margin: 10px 0;
   padding:10px;
}
.my-container.no-padding{
   padding:0px;
}

<div class="my-container">my-container
</div>
<div class="my-container">my-container
</div>
<div class="my-container no-padding">my-no-padding-container
</div>
<div class="my-container">my-container
</div>

answered Jul 22, 2016 at 1:44

TTCC

1,0556 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6369603 Over a year ago

Thank you very much. This was efficient and works well. Great.

Collectives™ on Stack Overflow

Changing one part of a CSS class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related