Is there a better way to do this?
.bg-swap,
.bg-swap .bg-swap .bg-swap,
.bg-swap .bg-swap .bg-swap .bg-swap .bg-swap,
background-color: var(--cocoa);
}
Discussion
No, css will forever be the stupidest thing ever invented
Besides JavaScript
I resemble that comment
I may have not really understood correctly what you're after, what are you trying to achieve exactly?
Recursive alternating colors, rather than sequential. Think quote notes inside of quote notes.
Sounds like you need to have code generating it dynamically.
I think you need to have at least another class to make it work and use something like:
.note {background:var(--color-1)}
.note.quote {background:var(--color-2)}
.note.quote .note {background:var(--color-3)}
or setup a var on the element itself, eg:
l.style.setProperty('--color','var(--color-even)';
and use:
.note {
--color:var(--color-odd)
background:var(--color)
}
- l.style.setProperty('--color','var(--color-even)';
+ l.style.setProperty('--color','var(--color-even)');
- --color:var(--color-odd)
+ --color:var(--color-odd);