How to Override the Properties of a CSS Class Using Another CSS Class

.catsandstars {
  width: 200px;
  height: 200px;
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif");
}

<div class="catsandstars"></div>

how to override a css class without affecting other classes with the same name

There are multiple ways you can approach this. One, you can create an id for that HTML tag that you want add'l/different style and create a #<id_name> in your css to handle that style or add another classname in front of container for the one you want to style. Or you can use CSS specificity for the nth child render this add'l style.

Approach 1)

HTML

<tagname id="other_css" class="container" ...>

CSS

#other_css {
  // css stuff
}

Approach 2

HTML

<tagname class="container other_css" ...>

CSS

.other_css {
  ...
}

.container {
  ....
}

Approach 3

HTML

<wrapper>
  <tagname class="container ...>
  <tagname class="container ...>
  <tagname class="container ...> <- the one you care about 
</wrapper>

CSS

wrapper:nth-child(3) {
  ...
}

Resources:
- https://www.w3.org/TR/selectors-3/#specificity

override a CSS class if two other classes are present

Just go

.class1.class2.class3 {
  /* these definitions are more specific and don't need !important; */
}

Remember this requires you to put class3 on the element as well:

<element class="class1 class2 class3"></element>

If the only reason you wanted to add class3 is to specify styles that should be applied when both classes class1 class2 are present, you don't even need class3, just go

.class1.class2 {
  /* these definitions are more specific than those for .class1 or .class2 
  and don't need !important;
  These rules apply to any element that has both class1 and class2 */
}

CSS multiple classes property override

As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.

Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.

CSS: Is it possible to override one class with another?

CSS has a very well-defined order of priority.

If two selectors have the same priority (as per your two single-class selectors), then with all else being equal, the one which is defined last in the CSS code is the one that takes priority.

So the simple solution here is to move your template CSS to lower down your CSS code.

If you can't do that for whatever reason, your best option is to make the template selector more specific. For example, if all your template elements are contained inside a div element and you know that's always going to be true, you could change the selector to div .template. It is now more specific than the .Category selector, and should therefore take precedence.

Finally, you always have the option of !important. I try to avoid using it if possible, as it tends cause issues if overused, but it is there for cases where it's needed, and in fact, cases like this are about the best justified use-case for !important I can think of.

---

Related Topics