Cannot select scroll view children via USS selector?

Unity Engine
1

To work around UI Toolkit’s lack of flex-gap styling for spacing children of scrollviews etc, I’m trying to select all children of a scrollview via .unity-scroll-view__content-container > *, however it does not seem to work. Children of scrollviews are not getting affected (neither visually nor in the Builder’s inspector for styles), but if I change it to .unity-scroll-view > * then the top-level subelements of the scroll view (its content and vertical scrollbar) do get affected.

Am I doing something something wrong or is there some limitation of USS selectors and scroll views that I am not aware of?

1 Like
2

Would using .unity-scroll-view__content-viewport > * work for your needs?

3

No that just selects the content-container.

4

Can you send some visuals of what you’re seeing and what you’re expecting? From what you explained and my attempts, the code I shared seemed to have worked for me :face_with_spiral_eyes:

5

Here’s a minimal reproduction project. You can open the single UI Document file to see what I mean.

8148623–1058354–ContentChildExample.zip (31.6 KB)

1 Like
6

Still not sure what you want. I see that the * selector is setting a red background color to all elements, and that the .unity-scroll-view__content-viewport > * selector is setting a yellow brackground color to the scroll view and it works as far as I can tell (I can see it behind the button, toggle, etc; behind the label if I add a margin I see it too).

What do you want to have what color, exactly?

7

The problem is that I cannot select the child elements of the scroll view, ie. the buttons, labels, etc that are the children, as children. I can select them via the * wildcard operator, but if I try to select them as children of the scroll view (for adding an automatic margin to spread them out, for example, since USS does not support flex-gap) I cannot. .unity-scroll-view__content-viewport selects the container element that contains all the actual child elements of the scroll view, not the children themselves. .unity-scroll-view__content-container > * does not work at all for no apparent reason, which you can see by the fact that the two colour and margin selectors are not being applied to the elements themselves.

1 Like