CSS Multiple Classes Property Override

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.

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 */
}

Multiple CSS Classes: Properties Overlapping based on the order defined

It depends on which one is declared last in your stylesheet. For example,

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

vs

.two { border: 6px dashed green }
.one { border: 6px dashed orange }

css when using multiple class for same css property

.rule2{
  width:300px;
  background:#aaa;
}

This one defines the width for the tag since it comes at the end. When you are having multiple classes for a tag, and a common style for them all then it is always the last rule which will overwrite all the previous rules.

Is possible overwrite a css class with another css class

Update: According to ZK documentation you could use sclass attribute to add classes to any element.

So, using the code I see in your screenshot...

 <vbox>
   <combobox>
   <combobox sclass="whatever">
   <combobox>
 </vbox>

...you'll be able to use the following selector to specify rules for the <combobox>es you place whatever class on:

.v-combobox.whatever .z-combobox-input {
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}

For more information use this guide.

According to this guide, you should use sclass when you want to add to the default styles applied to an element and zclass attribute when you want to reset the default styles (that means only what you define in your custom class will apply, and not the default styling for that element).

---

Initial answer:

This is the most important principle in CSS and it's called specificity.

Learning CSS means learning how you can use selectors and their specificity in order to apply rules selectively to some elements and not to others. It's what CSS is typically used for and it's totally possible.

Referencing an element by its id will be stronger (and hence override) any rules specified for any of its classes.

To understand specificity, I recommend this article as a starting point. You should also search for specificity calculator in your search engine of choice.

And in order to be able to use everything you learn about specificity you'll need to understand CSS Selectors and CSS Combinators.

---

For your specific [ :) ] case, you probably want to use the element's id as selector to apply rules to that element only. Given the id from your first example, this will work:

#vXgV3-real {
  /* the rules here will override the rules for .z-combobox-input
   * for the element with id="vXgV3-real" and only for that element 
   */
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}

class overrule when two classes assigned to one div

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

Override multiple classes

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 }

How to overwrite css using different classes without !important

You can add more specificity to your CSS, to very precisely target that type of element as well as increase the power of that selector. Like input[type="button"].thirdButton{...} see demo below:

input[type="button"],input[type="button"]:active,input[type="button"]:hover {  width: 172px;  height: 37px;  line-height: 2 !important;  margin: 11px 0px 0px 0px;  padding: 5px 150px 9px 5px;  line-height: 19px;  font-size: 12px;}
/* this is the selector line to change */input[type="button"].thirdButton, input[type="button"].thirdButton:hover,     input[type="button"].thirdButton:active {  width: 50px;  padding: 0;  background-position-x: 50%;}

<input type="button" name="generic" value="generic" /><br/><input type="button" name="third" value="third" class="thirdButton" />

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

---

Related Topics