DanielPahor DanielPahor - 4 months ago 8
HTML Question

Changing one part of a CSS class

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;
}

Answer

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>