Assign multiple css classes to a widget

[Taytoo]

I'm creating a dynamic property "class" in Qt designer and assign it a css class from the stylesheet. It works fine, however, when I try to assign multiple classes with a blank space between them (as is standard with css) i.e. "FontColor HoverEffect" then none of class styling is applied.

Does Qt support multiple css classes for a widget?

[Taytoo]

@JonB
Here's whats in ui_*.h file:

testLabel->setProperty("class", QVariant(QString::fromUtf8("GreenLabel ArialFont")));

I think I figured out the issue, not sure if its a bug in Qt or expected behavior though. I had styles defined as

QLabel["GreenLabel"]
{ color: rgb(0,240,0); }

QLabel["ArialFont"]
{ font-family: "Arial"; }

These were not working when combined, however, if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together. Also, if one of them is defined as a class specific to QLabel and other as plain class, then it only applies the plain class.

[JonB]

@Taytoo
Just to check: you mean does not work at run-time, right? I don't understand what it is you are doing in Designer?

[Taytoo]

@JonB No it doesn't work at run-time or in Qt Designer.

Basically, I apply a stylesheet (containing several css classes) to the dialog in Qt Designer. Then for each widget that I want to apply the style, I add a dynamic property named "class" (in Qt Designer) and set its value to css class name. It works fine and the css style is applied immediately to the widget. However, when I try to apply two css style classes (e.g. one for color and other for text style), then none of them is applied.

[JonB]

@Taytoo said in Assign multiple css classes to an element:

I add a dynamic property named "class" (in Qt Designer)

Ahh, this is the bit I did not know you could do! I have now seen the green + button for this :)

What Property Type did you give it? The default is String. Untested, but have you tried adding your values not as a space-separated string but as a StringList type?

[Taytoo]

@JonB I was using String, just tried StringList but it didn't work

[JonB]

@Taytoo
Maybe it's a design-time thing you can't do from Qt Designer, I don't know. What I do know is that it does work at run-time, which is only where I set this. I just tried

btnViewActions.setProperty("class", "buttonColorGreen colorRed")

and do get red text on green background, as expected. Verify this works for you in run-time code. You can also look in the generated ui_*.h file to see what actual code your design-time attempt produces.

[Taytoo]

@JonB
Here's whats in ui_*.h file:

testLabel->setProperty("class", QVariant(QString::fromUtf8("GreenLabel ArialFont")));

I think I figured out the issue, not sure if its a bug in Qt or expected behavior though. I had styles defined as

QLabel["GreenLabel"]
{ color: rgb(0,240,0); }

QLabel["ArialFont"]
{ font-family: "Arial"; }

These were not working when combined, however, if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together. Also, if one of them is defined as a class specific to QLabel and other as plain class, then it only applies the plain class.

[JonB]

@Taytoo said in Assign multiple css classes to a widget:

if I define them as plain classes i.e. .GreenLabel and .ArialFont, then they work together.

Yes, my definitions are always dotted, like

.buttonColorGreen { background-color: rgba(185, 245, 144, 0.9); }

Otherwise, I don't know but you may have to do

QLabel[class="GreenLabel"]

as per https://doc.qt.io/Qt-5/stylesheet-syntax.html#selector-types. Actually from there it might have to be something like:

QLabel[class~="GreenLabel"]

I may be confusing Qt's classes with CSS/QSS classes....

[Taytoo]

as per https://doc.qt.io/Qt-5/stylesheet-syntax.html#selector-types. Actually from there it might have to be something like:

QLabel[class~="GreenLabel"]

I may be confusing Qt's classes with CSS/QSS classes....

As per CSS spec, this would match any class field which Has a list of space separated strings and it will find GreenLabel. So can't be used for multiple classes.

I guess the best way is to create dot based/plain classes and then assign those to widgets.