0

for example I have a div like :

<div class="red yellow"><div>

and my css:

.red{background-color:red;}
.yellow{background-color:yellow;}

and how can I make my div's background-color becomes to orange when it has .red and .yellow class at the same time? I think the similar way is like:

.red .yellow{background-color:orange;}

I know it's not the right way , but how can I archive my requirement?

jjzjx118_2
  • 419
  • 7
  • 23
  • Just add a custom class with background-color:orange; the browser will read the css in the order it is written – KBell Nov 05 '19 at 08:16
  • There shouldn't be a space between two class names. Check my answer below. – VSM Nov 05 '19 at 08:20

2 Answers2

3

Try this way. There shouldn't be a space between two class names.

.red.yellow { background-color:orange; }

See this snippet.

.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow { background-color:orange; }
<div class="red">Red</div>
<div class="yellow">Yellow</div>
<div class="red yellow">Orange</div>
VSM
  • 1,765
  • 8
  • 18
0

HTML

<div class="red yellow"><div>

CSS

div{height:100px;} /* I added dummy height for div just to show output */

.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow{background-color:orange;}

OUTPUT

enter image description here

Par Tha
  • 1,265
  • 7
  • 10