Question

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?

Answer 1

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 }