How to use something like CSS classes?

[Zocker1999NET]

I want to style the timezone hint different from the normal clock time. I tried following:

    "clock": {
        "format": "{0:%H:%M} <span class='timezone'>{0:%Z}</span>",
    },

with following in the stylesheet:

#clock .timezone {
    font-size: 60%;
}

However, with this, waybar 9.24 fails to display the clock and logs:

Failed to set text '<markup>15:29 <span class="timezone">UTC</span></markup>' from markup due to error parsing markup: Attribute 'class' is not allowed on the <span> tag on line 1 char 46

So, as I understand it, I cannot use CSS classes just like in HTML. Is there a similar concept available so I can achieve the different format?

[jramrath]

This is some documentation for the markup waybar uses.

I think what you need is <span size='60%'>