Custom css does not allow "has" selector (with sub selectors)

[BennyB]

Dear community,

in a redesign of my Master Mashup I have a menu bar (showing icons) on the left hand side. On hover the bar is extending in its width, revealing the menu item labels. This is handled in css and works well. With one exception: On click a submenu shows up. When hovering the sub menu the menu bar is shrinking back to the original size and the sub menu is lost in the middle of the mashup. I would like to keep the menu bar expanded as long as a sub menu is open.

For this purpose I have checked the DOM tree and have noticed the sub menu (a "ul" element with classes "menu-level1" and "widget-menu-submenu") is attached to the body element. My research on the web led me to the "has" selector, resulting in this css code:

body:has(>ul.menu-level1) .container-menuandlogo {
  max-width: 210px !important;
  width: 210px !important;
}

I am setting width and max-width if the body has a "ul" element with class "menu-level1". Experts will already notice I am not a web designer, I am just trying to make something work.

But unfortunately it doesn't work. Thingworx won't let me save the mashup due to invalid css. It does not accept the ">" nor the "." character. With my little knowledge (confirmed by tests) I would say this is valid css.

Being the smartass I am I have exported the mashup to xml, changed the css to the code above and imported back to Thingworx. I opened up the Mashup and it worked as intended, the menu remains expanded as long as the sub menu is open. Hoo....ray? But what is this? When using the menu and navigating to another mashup the styles get broken. Unrelated labels have a different styling now, the label styles are not defined in Custom css but by the style properties.

Okay, next try. If the characters ">" and "." are the problem I might be able to escape them. After some more research I came up with:

body:has(\3Eul\2Emenu-level1) .container-menuandlogo {
  max-width: 210px !important;
  width: 210px !important;
}

Same code, only the two characters escaped. Yeaah, Thingworx is accepting that....but it does not work, it has simply no effect on the mashup.

So, at this point I am giving up and my questions are:

1. a) What am I doing wrong?
   b) Is this a bug of Thingworx?
   c) What can I do to make it work?
2. Maybe you know a better way to achieve what I want?

Thank you
Benny

[Rocko]

I just saved the original version successfully in a 9.5.0, no syntax error was displayed. I didn't test if it works though (not a being web dev myself)

Since "has" is quite new and CSS syntax has changed in 2022 and depending on your ThingWorx version I would guess that there was an older CSS library used which was updated in the meantime.

ref:

https://12daysofweb.dev/2022/css-has-selector/

https://mathiasbynens.be/notes/css-escapes

[BennyB]

Hey @Rocko ,

thank you very much for your very fast response. I just noticed I haven't provided the version I am working on. I have the same behavior on versions 9.3.16 as well as 9.5.2. I am very surprised you see no error on 9.5.0. Could this be a configuration or setting somewhere?

Thanks

Benny

[Rocko · Accepted solution]

I just tried a 9.6 prerelease and also got the syntax error, but not in 9.5.0.

Given that behaviour,

Correction 9.5.0 has the same issue, unless linting is off, But if it's off, you can save and see if it's working.

So try to do that with your versions. If it works, you can still create a ticket to get the linting updated.

I think the issue is with the css-lint library that is used. While the expression might be valid, the linter doesn't think so, for example the linter at https://www.atatus.com/tools/css-lint will also claim a missing RPAREN with your expression.

[BennyB]

You, Sir, made my day. Turning off linting does the job, the behavior is as desired. Thank you very much.