CODEWITHSUNDEEP
css
07_05_GuyT
07_05_GuyT

Reputation: 2887

Use just one class instead of two

I have the following class which I use in multiple places like labels etc

.cont-label.ope-label {
    font-weight: normal;
    text-align: left;
    font-family: ariel;
    font-size: 18px;

}

now for header I want to add just color for specific class ,there is a way not to do it like that ?

.cont-label.ope-label-new {
    font-weight: normal;
    text-align: left;
    font-family: ariel;
    font-size: 18px;
    color:red;

}

Upvotes: 0

Views: 84

Answers (4)

amol
amol

Reputation: 1555

You just need to create an css hierarchy like 

.header .cont-label.ope-label{
      color: red;
    }

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

Try like this:

HTML:

<header> 
<div class="cont-label ope-label">
... 
</div>
</header>

CSS:

.cont-label.ope-label,header.cont-label.ope-label {
    font-weight: normal;
    text-align: left;
    font-family: arial;
    font-size: 18px;    
}

.cont-label.ope-label {
    color:blue;    
}

header.cont-label.ope-label {   
    color:red;    
}

Upvotes: 1

Pete
Pete

Reputation: 58462

you could just give the header a class of the colour you want and overwrite that:

<h1 class="cont-label ope-label red">test</h1>

then css:

.red {color:red;}

if your original header has a colour set then specificity will come into it:

.cont-label.ope-label.red {color:red;}

Upvotes: 3

pavel
pavel

Reputation: 27082

If you mean <header> element, use just

header .cont-label.ope-label {color: red;}

If header should be only class/id, use the similar

.header .cont-label.ope-label {color: red;}
/* or for ID */
#header .cont-label.ope-label {color: red;}

Upvotes: 1

Related Questions