CODEWITHSUNDEEP
css
Justin
Justin

Reputation: 472

Override multiple classes

If I am trying to override a specific tag inside multiple classes, do I have to explicitly write that out for each class or is there a way to combine them. For example I have:

.class1 { }
.class2 { }
.class1 h2 {
    <!-- some code -->
}

And I want to apply the code for h2 tags in class1 also to h2 tags in class2, is there a way to define it for both class1 and class2 without writing the code twice?

Upvotes: 0

Views: 1122

Answers (4)

GrayFox374
GrayFox374

Reputation: 1782

 <h2 class="class1 class2">This is my taunt</h2>

This is the standard way to implement multiple classes. As a general rule, you should define classes that you know in advance will overlap to exclude declarations you know will be in the other class. Make a third class for common property/value pairs.

Upvotes: 0

Phrogz
Phrogz

Reputation: 303224

You want Selector Grouping:

.class1 h2,
.class2 h2 { ... }

Quoting the spec:

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

Upvotes: 4

Nishu Tayal
Nishu Tayal

Reputation: 20830

If you have same css style in more than one class, then you should combine those class, in order to optimize the code.

You can group the css class.

.class1 h1{ ........}
.class2 h2{ ........ }

It means, that h2 element will have class1 css style. 

.class1,.class2{..........}

It means, that class1, class2 both have same css style

Upvotes: 0

Pranalee
Pranalee

Reputation: 3409

if you want css to applied for all h2 in page, you can define it page level. But if you want to apply for only class1 & class2 , you will have to write it twice.

Upvotes: 0

Related Questions