если класс и класс показать определенный CSS

Question

Код:

<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> 

Сейчас я ищу решение, в котором я могу сказать класс mgu-taser-slider-bubble, чтобы показать определенный фон-IMG если «mgu-teaser-slide-left и mgu-rot» или другой, если "mgu-teaser-slide-left и mgu-gelb". Мне нужна эта комбинация, потому что в конце она должна отображать фоновое выравнивание влево или вправо (в конце будет другой класс «mgu-teaser-slide-right»).

Я пробовал так (что не работает!):

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

спасибо за помощь

Answer 1

Попробуйте это.

Поскольку класс .mgu-тизер-слайд-влево.mgu гниль находятся на одном элементе, доступ к нему с

.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>

Answer 2

Он должен работать как это:

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

https://jsfiddle.net/ph9ka5c4

Answer 3

Объединить CSS классы для И и использовать несколько правил CSS с запятыми для ИЛИ:

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