Formatting all cloze card texts permanently

Anki Card Design
1

I want to achieve an effect where only the text of cloze cards is formatted in a certain way and REMAINS formatted when another cloze card is shown.

I have tried to achieve this with span: nth-child CSS tags but it doesn’t work as well as I intended, because I also wanted every nth cloze card text to be formatted differently.

span:nth-child(1) {
   color: #FFff00; /* Light blue color for odd span elements */
}

span:nth-child(2){
   color: #00FF; /* Gold color for even span elements */
}

span:nth-child(3)
   color: #ffffff; /* Gold color for even span elements */
}

span:nth-child(4)
   color: #ffffff; /* Gold color for even span elements */
}

span:nth-child(7)
   color: #ffffff; /* Gold color for even span elements */
}

Something like this:

image
image402×566 36.7 KB

The yellow are cloze actually answers of cloze cards inside the entire cloze note (black).

1 Like
2

I’m not sure I quite understood how you wanted each cloze span to be formatted but perhaps these tips will let you figure it out:

  • The cloze spans have a css class cloze or cloze-inactive and an attribute data-ordinal="X" attribute where X is the cloze number. These would let you target specific clozes as active or inactive letting you precisely select how each individual cloze is styled.
  • CSS Attribute Selector
/* Targets the first cloze, when it's active */
span.cloze[data-ordinal="1"] {
  color: red;
}
/* Targets the first cloze, when it's inactive */
span.cloze-inactive[data-ordinal="1"] {
  color: blue;
}
/* Targets the second cloze, when it's active */
span.cloze[data-ordinal="2"] {
  color: green;
}
/* Targets the second cloze, when it's inactive */
span.cloze-inactive[data-ordinal="2"] {
  color: purple;
}
/* etc... */
2 Likes
3

This is the look that I am trying to achieve

image

I tried it and it did not work

4

So, the screenshot you posted has

  • the 1st cloze blue, both when active or inactive
  • the 2nd cloze purple, both when active or inactive
  • the 3rd cloze red, both when active or inactive

The css for that would be

/* First cloze blue */
span.cloze[data-ordinal="1"],
span.cloze-inactive[data-ordinal="1"] {
  color: blue;
}
/* Second cloze purple */
span.cloze[data-ordinal="2"],
span.cloze-inactive[data-ordinal="2"] {
  color: purple;
}
/* Third cloze red */
span.cloze[data-ordinal="3"],
span.cloze-inactive[data-ordinal="3"] {
  color: red;
}
2 Likes
5

It worked! But only for the first 3 cloze cards in my note though. I need this to keep on looping for ever. In that order, over and over again so that every cloze card is coloured in that order.

image

For example:

Every nth cloze card is red
Every nth+1 cloze card is blue
Every nth+2 cloze card is purple

Nvm I think I got it :sweat_smile:

span.cloze[data-ordinal]:nth-of-type(3n+1),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+1) {
  color: blue;
}

span.cloze[data-ordinal]:nth-of-type(3n+2),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+2) {
  color: purple;
}

span.cloze[data-ordinal]:nth-of-type(3n+3),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+3) {
  color: red;
}

Thank you so much for the help!!

6

One issue though is that I need the cloze bracket to stay always in one colour and not change with the cloze text.

image

Here for example it changed into red.

7

Nice! I actually thought nth-of-type wouldn’t work here because you can’t target the value in a css attribute with it that but actually leaving the value out of the targeting works.

1 Like
8

That can be fixed with adding an additional targeting on the active cloze. On the card front, the active cloze has an additional attribute data-cloze which it won’t have on the card back. Then the css targeter :not([data-cloze]) will exclude the active cloze from being targeted only the card front:

span.cloze[data-ordinal]:nth-of-type(3n+1):not([data-cloze]),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+1) {
  color: blue;
}

span.cloze[data-ordinal]:nth-of-type(3n+2):not([data-cloze]),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+2) {
  color: purple;
}

span.cloze[data-ordinal]:nth-of-type(3n+3):not([data-cloze]),
span.cloze-inactive[data-ordinal]:nth-of-type(3n+3) {
  color: red;
}
1 Like
9

Masterpiece! Now my cards look much more livelier

10

Hmm sorry to bother you again. But I wish for a slight adjustment: :pray: I would like the cloze card being focused in the question to retain its old color by the normal formatting. For example, green.

11

The targeter for the focused cloze is span.cloze and the other clozes are span.cloze-inactive.

/* Inactive cloze styling applied differently for 1st, 2nd, 3rd etc. */
span.cloze-inactive[data-ordinal]:nth-of-type(3n+1) {
  color: blue;
}
span.cloze-inactive[data-ordinal]:nth-of-type(3n+2) {
  color: purple;
}
span.cloze-inactive[data-ordinal]:nth-of-type(3n+3) {
  color: red;
}

/* Active cloze styling always the same regardless of cloze number */
span.cloze:not([data-cloze]) {
  color: green
}

If you wanted to also style the […] in the card front as green then remove the :not[data-cloze] part

1 Like
12

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