CSS set background image regarding class selector

Question

I would like to set the background image of a div regarding its class. The web I am developing should show a set of game cards. Each card is contained in a div and have a class like this:

<div class="card value suit>
</div>

Being the suit and value for instance clubs and five respectively. So for instance, for a div container like this:

<div class="card seven clubs>
</div>

I wonder if there is a way via CSS to set its background-image to this attribute without writing this for each card:

.card.seven.clubs {
    background-image:  url("../../images/seven_clubs.png");
}

Answer 1

you can't really have dinamy classes with css only, you need some form or precompiler such as SASS to to convert from thing like

for every number do {
  generate number properties
}
for every suite do {
  generate suite css properties
}

to actual css code in the form of

.suite1{
  property: value;
}
.suite2{
  property:value
}
.number1{
  property:value
}

or you can use Javascript and dynamically set styles on it

var cards = document.getElementsByClassName('card');
for (var i = 0; i++; i < cards.length){
  var thisElementClasses = cards[i].classList;
  let imageUrl = '../../images/'+thisElementClasses[0]+'_'+'thisElementClasses[1]'+'.png';
  card[i].style.backgroundImage = imageUrl;
}