Add support for CSS :empty pseudo-class

Anki Suggestions
1

The CSS empty class allows you to style empty elements.

This would be handy to hide elements that are not needed for cards that have blank fields. (As you can set the pseudo-class to display:none).

At the moment, you can do this by wrapping the fields in an “if statement”. But using the empty class allows for cleaner code in templates.

Example: Here is my a template:

<div class="language">{{Publication}}</div>

.publication {
background: blue;
border: 1px solid black;
margin:20px;
}

.publication:empty {
display:none;
}

If the Publication field on the card is empty, then the .publication div will still render, outputting the margin.
But the :empty class will hide it.

At the moment, you could wrap the div with if tags (e.g. {{#Publication}}<div class="language">{{Publication}}</div>{{/Publication}})

But the :empty class allows for a cleaner more manageable template.

2

:empty is already supported. Try replacing the class language in your example with publication (or change your CSS rules to target .language).

Please note that support for new syntax is not something the Anki devs actively write code for, it’s the job of the web engine Anki is using to keep up with current standards.

5 Likes
3

Thank you kindly for your help! I got mixed up with how it is supposed to work. Thanks again for taking the time to help!

1 Like