# Formatting all cloze card texts permanently

**URL:** <https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786>\
**Category:** Card Design\
**Created:** [July 6, 2024, 9:31am UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786 "2024-07-06T09:31:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 6, 2024, 9:31am UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/1 "2024-07-06T09:31:47Z")

</div>

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.

```auto
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](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/0/7/072b65e87dc14d371226e8f157f347b521657627.png)  
The yellow are cloze actually answers of cloze cards inside the entire cloze note (black).

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 6, 2024, 12:04pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/2 "2024-07-06T12:04:15Z")

</div>

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](https://www.w3schools.com/css/css_attribute_selectors.asp)

```auto
/* 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... */

```

---

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 6, 2024, 12:15pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/3 "2024-07-06T12:15:08Z")

</div>

This is the look that I am trying to achieve

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/5/0/502177574e7225083f8c379f42293dcd7d60cec0.png)

I tried it and it did not work

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 6, 2024, 12:21pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/4 "2024-07-06T12:21:44Z")

</div>

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

```auto
/* 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;
}

```

---

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 6, 2024, 12:33pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/5 "2024-07-06T12:33:19Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/9/c926f964a2ab4146b2772280fa93b2005f936902.png)

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 😅

```auto
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!!

---

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 6, 2024, 12:53pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/6 "2024-07-06T12:53:09Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/7/c7cb99513d9224a9bd6c8d791e973df783057cd1.png)

Here for example it changed into red.

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 6, 2024, 12:53pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/7 "2024-07-06T12:53:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 6, 2024, 12:57pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/8 "2024-07-06T12:57:20Z")

</div>

> [@DerIshmaelite](#):
>
> One issue though is that I need the cloze bracket to stay always in one colour and not change with the cloze text.

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:

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 6, 2024, 12:59pm UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/9 "2024-07-06T12:59:49Z")

</div>

Masterpiece! Now my cards look much more livelier

---

<div class="post-metadata">

**Author:** ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)\
**Post date:** [July 7, 2024, 11:00am UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/10 "2024-07-07T11:00:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jhhr](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jhhr/32/21339_2.png) [@jhhr](https://forums.ankiweb.net/u/jhhr)\
**Post date:** [July 7, 2024, 11:34am UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/11 "2024-07-07T11:34:42Z")

</div>

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

```auto
/* 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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [August 6, 2024, 11:34am UTC](https://forums.ankiweb.net/t/formatting-all-cloze-card-texts-permanently/46786/12 "2024-08-06T11:34:46Z")

</div>

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