if class and class show certain css

Question

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

You have to read the css documentation again. The issue is that you have spaces between the class names. Have a try with `.mgu-teaser-slide-left.mgu-rot` instead... (directly concatenated) — arkascha, Dec 28 '16 at 09:43
Related: [Multiple Class / ID and Class Selectors](https://css-tricks.com/multiple-class-id-selectors/) on CSS-tricks — FelipeAls, Dec 28 '16 at 09:45
Possible duplicate of [CSS Selector that applies to elements with two classes](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes) — Jishnu V S, Dec 28 '16 at 09:47

Deep · Accepted Answer · 2016-12-28T09:44:20.757

2

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>

edited Dec 28 '16 at 09:44

answered Dec 28 '16 at 09:43

Deep

9,594
2
21
33

Don't just flash out some code, that's hardly helpful for others who come here and see your answer. Always provide explanation. – giorgio Dec 28 '16 at 09:43
was adding the explanation as well. your comment beat me in saving that, may be by 40 odd seconds – Deep Dec 28 '16 at 09:45
1

are you afraid someone would beat you with a correct answer? SO is actually not a contest... – giorgio Dec 28 '16 at 09:48
@giorgio dont you think its better to appraise people for helping someone without gaining anything. 40 seconds should be given at least for better explanation. May be you get some actual prize by giving some answer here but i never – Deep Dec 28 '16 at 09:52

score 0 · Answer 2 · answered Dec 28 '16 at 09:46

0

It should work like this:

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

https://jsfiddle.net/ph9ka5c4

answered Dec 28 '16 at 09:46

Stefan Kunze

618
4
14

score 0 · Answer 3 · answered Dec 28 '16 at 09:47

0

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('...');
}

answered Dec 28 '16 at 09:47

Khalid T.

10,039
5
45
53

if class and class show certain css

3 Answers3