Changing cards background depending on tag

I have a deck with different tags that I want to use to change the styling.

In the whole HTML of front and back I am using:

<div class="{{Tags}}">

and in CSS:

div[class*="specific_tag"] {
    background-color: #b5ead7;

Problem is, this is not changing the background of the card, but only of the content, leaving the rest of the card white.

Is there a way to modify the

.card {
    background-color: white;

from inside the CSS tag div so that the whole card adopts that color?

Deleting the property from the .card section of CSS didn’t work.


1 Like

you need to do this in JS. also in CSS, you must set a default background color otherwise the previous card’s style is erroneously unchanged for the next card.

var tags = "{{Tags}}".split(' ');
var mapping = {};
var elm_card;

mapping['mytag']  = function() { = '#b5ead7';

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));

async function run() {
  if (document.readyState == 'complete') {
    elm_card = document.querySelector('.card');
    for (tag of tags) mapping[tag]?.();
  // not fully loaded, try again in 0.1ms
  await delay(100);


1 Like

Thanks! I’ll try it later and let you know. :slight_smile:

ah, i got the bug wrong. you need to reset the in JS instead of CSS, as setting it from JS also sets the inline style attribute.

another approach could be to create a <style> element with the style you want. that’d allow for Anki to clear out the contents automatically instead of manually resetting the style.

I am not sure I understand what you mean. I will have to try out the code you wrote later on the computer.

Is using <style> better or easier?

Sorry, I probably didn’t understand. I pasted the code in the HTML and then also in CSS, but it didn’t work. I am not sure what you mean by

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.