CODEWITHSUNDEEP
htmlcsscss-selectors
user2009300
user2009300

Reputation: 57

Styling identically-named CSS classes differently based on count

Given a series of user generated lists in the following format: 

.birds {
  background-color: rgba(0, 0, 255, 1);
}
<div class="animals">
  <div class="elephants">
    elephants
  </div>
  <div class="cats">
    cats
  </div>
  <div class="birds">
    Birds
  </div>
  <div class="elephants">
    elephants
  </div>
  <div class="birds">
    Birds
  </div>
  <div class="birds">
    Birds
  </div>
  <div class="cats">
    cats
  </div>
  <div class="dogs">
    dogs
  </div>
  <div class="birds">
    Birds
  </div>
</div>

Is there a way to style each instance of class "birds" so that each one gets a different shade of background-color blue (e.g. light blue, medium blue, dark blue), based on how many class "birds" are in the list, getting darker if more are present ? Note that I will only have access to CSS, not HTML or Javascript.

Upvotes: 1

Views: 112

Answers (2)

Унгамист Долматов
Унгамист Долматов

Reputation: 113

You also can try some of this:

.animals{
  background: linear-gradient(to bottom, lightblue, blue);
}
.animals > div:not(.birds){
  background: white;
}
<div class="animals">
  <div class="elephants"> elephants </div>
  <div class="cats">      cats      </div>
  <div class="birds">     Birds     </div>
  <div class="elephants"> elephants </div>
  <div class="birds">     Birds     </div>
  <div class="birds">     Birds     </div>
  <div class="cats">      cats      </div>
  <div class="dogs">      dogs      </div>
  <div class="birds">     Birds     </div>
</div>

Upvotes: 1

user663031
user663031

Reputation: 

.birds { color: white; }

.birds                   { background-color: lightblue; }
.birds ~ .birds          { background-color: blue;      }
.birds ~ .birds ~ .birds { background-color: darkblue;  }
<div class="animals">
  <div class="elephants"> elephants </div>
  <div class="cats">      cats      </div>
  <div class="birds">     Birds     </div>
  <div class="elephants"> elephants </div>
  <div class="birds">     Birds     </div>
  <div class="birds">     Birds     </div>
  <div class="cats">      cats      </div>
  <div class="dogs">      dogs      </div>
  <div class="birds">     Birds     </div>
</div>

Upvotes: 2

Related Questions