CODEWITHSUNDEEP
htmlcss
Neeraj Kumar Gupta
Neeraj Kumar Gupta

Reputation: 2363

Ways to use common css styles for all other css class

Suppose I have following css class 

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    border-color: #F5E0C4;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
    border-color: #F5E0C4;
}

.class3
{
   border-color: #F5E0C4;
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

here all above classes are using same border-color: #F5E0C4; as this border-color is repeating in classes; I want to keep it separate and use commonly for all above classes, so if any point of time I want to change the colour I should change at only one place.

I googled for this but I got only one approach that says apply multiple css class on element like this.

.classBorder
{
  border-color: #F5E0C4;
}

<div class="class1 classBorder"> 
</div>
<div class="class2 classBorder"> 
</div>
<div class="class3 classBorder"> 
</div>

Please suggest me any other approach if it is possible.

Upvotes: 1

Views: 95

Answers (5)

Mandeep
Mandeep

Reputation: 21

You can select all classes, simply: 

.class1, .class2, .class3 { border-color: #F5E0C4; }

Upvotes: 2

JacopoDT
JacopoDT

Reputation: 365

You can select all three classes like that:

.class1, .class2,  .class3 {    
  border-color: #F5E0C4;    
}

Upvotes: 2

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You can use LESS also

.classBorder
{
  border-color: #F5E0C4;
}

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    .classBorder;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
    .classBorder;
}

.class3
{
   .classBorder;
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

Refer It - Less Link

Upvotes: 4

ochs.tobi
ochs.tobi

Reputation: 3454

You could try to go with the CSS3 Variables. Something like: 

:root {
    --main-border-color: #F5E0C4;
}

.class1
{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
    border-color: var(--main-bg-color);
}

Upvotes: 1

Sree Nath
Sree Nath

Reputation: 543

Or you could simply use something like this:

.class1, .class2, .class3 {
 border-color: #F5E0C4;
}
    .class1 {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    height: 21px;
}

.class2
{
    font-weight: bold;
    padding: 0px 3px 3px 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e2ccab;
}

.class3
{
   font-weight: bold;
   font-size: 14px;
   background-image: linear-gradient(180deg,#314d8a,#93aee8);
}

Upvotes: 1

Related Questions