Add (Combine) CSS class attributes - icons or images - css

Question

I am trying to show the proper amount (and color) of dots based on the class that is indicated for each various element. There will be several different required colors (probably 7 or 8), and some will be mixed. Chaining is not really an option, unfortunately, due to the large quantity of possible combinations.
<a class="reddot bluedot greendot purpledot"> Blah Blah Blah</a>
<a class="purpledot"> Blah Blah Blah</a>
<a class="greendot blackdot"> Blah Blah Blah</a>
I've tried the following css:
.reddot{
background-image: url('/images/reddot.png');
background-position: right bottom;
background-repeat: no-repeat;
}
.bluedot{
background-image: url('/images/bluedot.png');
background-position: right bottom;
background-repeat: no-repeat;
}
.reddot.bluedot{
background-image: url('/images/reddot.png'),url('/images/bluedot.png');
background-position: right bottom;
background-repeat: no-repeat;
}
etc.
Yes, I know the images overlap here ... that's not really the end of the world. I think I know how to position them better.
The above css code gets me what I want, but there are so many combinations of the various elements that change.
I know I'm working with background-image here, and I know that the classes cannot be accumulated (therefore, chaining seems like the only way). However, is there another way using CSS that I can find a way to add dots .. or other background or foreground images or icons .. simply by adding classes to the html?
I can't add or any other hierarchy of classes.

Answer 1

Let's assume that you always want dots and that the colors are always in the same order...
Gradients
You can do this with CSS background-gradients and variables but its a bit complex.
Here's an example (and on Codepen if you want to play with it) I made the default gray but you could change it to transparent if you don't want to visually show the slots.
.dots {
border: 1px #dadada solid;
min-height: 2rem;
width: 10rem;
margin: 1rem 2rem;
background:
radial-gradient(1rem 1rem at 1rem 50%, var(--c1, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 2.5rem 50%, var(--c2, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 4rem 50%, var(--c3, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 5.5rem 50%, var(--c4, #dadada) 45%, transparent 51%);
}
.red {
--c1:#D50000;
}
.gold {
--c2:#FDD835;
}
.blue {
--c3:#1976D2;
}
.green {
--c4:#00E676;
}
<div class="dots"></div>
<div class="dots red blue"></div>
<div class="dots green"></div>
<div class="dots gold blue"></div>
<div class="dots red gold green blue"></div>
Edit: Using a background image instead
If you don't like the look of a radial gradient, you could chain and position background-image the same way. In this case, you would use a variable for the file path you want to display in the background.
.stackedBG {
border: 1px #dadada solid;
height: 40px;
width: 160px; /* 40 *4 */
margin: 1rem 2rem;
background-color: transparent;
background-image: var(--b1, none), var(--b2, none), var(--b3, none), var(--b4, none);
/* all images are 40x40px */
background-position: 0 0px, 40px 0, 80px 0, 120px 0;
background-repeat: no-repeat;
}
.bg1 {
--b1:url(https://i.imgur.com/ivPLv2g.png);
}
.bg2 {
--b2:url(https://i.imgur.com/v8GNPuX.png);
}
.bg3 {
--b3:url(https://i.imgur.com/ywuzlHn.png);
}
.bg4 {
--b4:url(https://i.imgur.com/peTsfUi.png);
}
<div class="stackedBG bg3"></div>
<div class="stackedBG bg1"></div>
<div class="stackedBG bg2 bg4"></div>
<div class="stackedBG bg1 bg2 bg3 bg4"></div>
Edit 2: Positioning background
I think the easiest way to position either of these options (if relative to the upper left isn't desired) is to use a pseudo-element. Contain the backgrounds in a :after or :before and then absolutely position the pseudo-element.
.dots {
border: 1px #dadada solid;
min-height: 5rem;
margin: 1rem 2rem;
padding: 0.5rem;
font-family: Sans-Serif;
/* the important part */
position: relative;
}
.dots:after {
content:'';
position: absolute;
/* size is based on the background layout */
width:6.5rem;
height: 1rem;
/* typically I would do positioning here
But it's easier to show an example if its separate */
background:
radial-gradient(1rem 1rem at 1rem 50%, var(--c1, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 2.5rem 50%, var(--c2, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 4rem 50%, var(--c3, #dadada) 45%, transparent 51%),
radial-gradient(1rem 1rem at 5.5rem 50%, var(--c4, #dadada) 45%, transparent 51%);
background-repeat: no-repeat;
}
/* positioning */
.tr:after {
top: 0.5rem;
right: 0.5rem;
}
.br:after {
bottom: 0.5rem;
right: 0.5rem;
}
.tl:after {
top: 0.5rem;
left: 0.5rem;
}
.bl:after {
bottom: 0.5rem;
left: 0.5rem;
}
/* variables still work the same with the pseudo class */
.red {
--c1:#D50000;
}
.gold {
--c2:#FDD835;
}
.blue {
--c3:#1976D2;
}
.green {
--c4:#00E676;
}
<div class="dots">Parent Element</div>
<div class="dots red blue tr">Parent Element</div>
<div class="dots green tl">Parent Element</div>
<div class="dots gold blue br">Parent Element</div>
<div class="dots red gold green blue bl">Parent Element</div>

Answer 2

Unfortunatley I don't believe you can accomplish this with pure css.
My suggestion would be to append whatever dots you need to your <a></a> element. Like <span class=""reddot></span>. Then you can then style then independently, and let them position themselves naturally.
I've made an example here: example fiddle