CODEWITHSUNDEEP
htmlcsscss-selectors
frontendgirl
frontendgirl

Reputation: 57

CSS selector for element with two classes not working

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>

Upvotes: 3

Views: 1803

Answers (2)

ttA01
ttA01

Reputation: 41

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>

Upvotes: 2

Naqash Malik
Naqash Malik

Reputation: 1816

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>

Upvotes: 1

Related Questions