CODEWITHSUNDEEP
htmlcss
gstackoverflow
gstackoverflow

Reputation: 36984

How to merge conflicted classes?

I have 2 conflicted styles:

enter image description here

Each style adds icon on component.

How to add 2 icons at one time.

P.S.

Now I have following css:

.term-list .jp-container ul li.not-moderated
{
    background: #ffb2b2  url(../images/not-pas.png) no-repeat 360px center;
}
.not-active-terminal
{
    background:   url(../images/messagebox_warning.png) no-repeat 250px bottom !important;
}
.not-active-terminal.not-moderated{
     background: url(../images/messagebox_warning.png) no-repeat 250px bottom,
     url(../images/not-pas.png) no-repeat 360px center,
     #ffb2b2;
 }

separately not-moderated and not-active-terminal works fine but both - not:

...
<li id="terminal100" class="not-active-terminal not-moderated">
...

Upvotes: 1

Views: 83

Answers (2)

DoctorDestructo
DoctorDestructo

Reputation: 4362

Looking at your updated CSS, I would guess you need to either:

a) remove !important from the background value in the .not-active-terminal rule set, or...

b) add !important to the background value in the .not-active-terminal.not-moderated rule set.

Properties that are defined with !important are always treated as if they have more specificity than those without it, so it looks to me like the background value of the multi-class rule set is going to be overridden by the previous rule set.

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

When a property is defined twice, default behavior in CSS is to override one of the declarations (the one with less specificity and if specificities are equal than the first one in the order of CSS styles is overridden).
That's a highly desired behavior :) or else we couldn't ever override or unset or reset something already defined.

Multiple backgrounds are defined with one property so you need to write each background in one value.

.case1 {
  background: red url(image1.png) left top no-repeat;
}
.case2 {
  background: url(image2.png) right bottom no-repeat;
}
.case1.case2 {
  background: url(image2.png) right bottom no-repeat,
    url(image1.png) left top no-repeat,
    red;
}

It's hard to keep track after a while but still better than if there were something like new CSS properties background2, background3, etc with no limit. Then in a framework or a reset CSS, you'd have to override an unknown number of properties "just in case".

Using CSS multiple backgrounds (MDN)

Order is important: first declared is above others and you may have a color as last part after the last comma (an opaque color would hide everything that comes after it). You can have a multiple background-image property and define in separate properties multiple background-repeat, background-position, etc if it's more suitable

Upvotes: 2

Related Questions