CSS selector for element with two classes not working

Question

I am trying to style these elements, and the element with two classes can't be style different than the one with one class. I've tried to select it with .red.balls also, but it doesn't work.

.ballsAll {
  display: block;
  margin-left: 14%;
}
.red {
  background-color: red;
}
.balls {
  background-color: white;
}

<div class='ballsAll'>
  <p>
    <span class='balls'>22</span>
    <span class='balls red'>11</span>
  </p>
</div>

Answer 1

Declare .balls before .red, Like this:

.ballsAll {
  display: block;
  margin-left: 14%;
}
.balls {
  background-color: white;
}
.red {
  background-color: red;
}


<div class='ballsAll'>
  <p>
    <span class='balls'>22</span>
    <span class='balls red'>11</span>
  </p>
</div>

Answer 2

Use this code:

.ballsAll {
  display: block;
  margin-left: 14%;
}
.red.balls {
  background-color: red;
}
.balls {
  background-color: white;
}

<div class='ballsAll'>
  <p>
    <span class='balls'>22</span>
    <span class='balls red'>11</span>
  </p>
</div>