CODEWITHSUNDEEP
htmlcss
Stiller Eugen
Stiller Eugen

Reputation: 701

if class and class show certain css

Code:

<div class="mgu-teaser-slide-left mgu-rot">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>
or
<div class="mgu-teaser-slide-left mgu-gelb">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>

Now I'm looking for a solution where I can tell the class mgu-taser-slider-bubble to show a certain background-img if "mgu-teaser-slide-left and mgu-rot" or another if "mgu-teaser-slide-left and mgu-gelb". I need this combination because at the end it should show the background left or right aligned (there will be an other class "mgu-teaser-slide-right" at the end).

I've tried like that (which doesn't work!):

.mgu-teaser-slide-left .mgu-rot .mgu-teaser-slider-bubble { background: url('...'); }

thanks for help

Upvotes: 0

Views: 66

Answers (3)

Khalid T.
Khalid T.

Reputation: 10567

Concatenate CSS classes for AND and use multiple CSS rules with commas for OR:

.mgu-teaser-slide-left.mgu-rot .mgu-teaser-slider-bubble,
.mgu-teaser-slide-left.mgu-gelb .mgu-teaser-slider-bubble { 
  background: url('...');
}

Upvotes: 0

Stefan Kunze
Stefan Kunze

Reputation: 618

It should work like this:

 .mgu-teaser-slide-left.mgu-gelb .mgu-teaser-slider-bubble {
     …
 }

https://jsfiddle.net/ph9ka5c4

Upvotes: 0

Deep
Deep

Reputation: 9794

Try this.

Since class .mgu-teaser-slide-left .mgu-rot are on same element,access it with 

.mgu-teaser-slide-left.mgu-rot


.mgu-teaser-slide-left.mgu-rot .mgu-teaser-slider-bubble { 
  background-color: red; 
}
<div class="mgu-teaser-slide-left mgu-rot">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>
or
<div class="mgu-teaser-slide-left mgu-gelb">
    <div class="mgu-teaser-slider-bubble">blabla</div>
</div>

Upvotes: 2

Related Questions