Why can’t I set style properties of my buttons using the selector ‘Button’?
Okay so I can set some properties. Font size and color seems to be adjustable. Hell, even the background image! Maybe some others too. But if I want to set the background color, borders, margins and padding, and much more then I have to either select it by class or identifier.
I’m starting to see why they call it ‘uss’ instead of ‘css’. That cascading part is hardly present 
Okay, figured it out. Apparently you MUST specify pseudo classes for buttons. In this case I needed Button:enabled in order to set the default background color. Presumably this is a theme throughout USS for all dynamically changed properties of elements?
Oooookay and yeah nevermind. Looks like NONE of the pseudo class selectors work other than :enabled. I can also type completely made-up pseudo classes and they will override everthing else. So I can have Button:enabled and then override that with Button:blabbityblahblah but I cannot get Button:hover, Button:active, Button:focus, or really anything else to do anything at all.
EDIT: Even more interesting, the made up pseudo selectors only work if they are the last to be declared. Like the physical order they are typed in the file. Probably a parsing issue of some kind?
Alright, last self-post I swear. I think. I hope. I swear.
I found a handy way to quickly see what classes are affecting any element in the tree and now i can see that buttons are given the .unity-button class by default, which appears to be what is overriding the base style. Or maybe rather defining the base style in the first place really. Anyway all I had to do was specify the selector ‘Button.unity-button’ and it worked. Makes total sense now that I know it but geeze it was a bit obtuse to discover.
I had to do the same thing, UI builder does help to understand what selector works, as when you make a rule and hover with the mouse it makes the selected parts highlighted in the view
Selection is definetly something that can be improved in my opinion, as it doesn’t always work
And for predefined editor components the root of the component is totally ignored by the “selection system” and you have to omit it from the selector
As much as I hate web dev and CSS for layout I always thought the actual styling of elements via selectors was relatively simple and easy. To me it feels like what Unity is doing it seems a bit weird. My guess is that in order to support easily defining new elements in C# they probably had to make selectors work a slightly different way than you might expect. Or maybe I’m just way outta touch with how the webdev world does stuff and this is the norm now?
Exactly, i do like the separation of hirearchy style and function, but CSS selectors are powerful, USS selectors clearly sometimes don’t work as they should
I do feel the lack of a QuerySelector function too
Not at all, CSS remained mostly the same, it’s the js world that has become a wild west
I’m starting to see what you mean. I’ve spent the better part of three hours working on two controls and most of that time has been just throwing things at Unity to see what will stick. I thought I had it figured out for a bit but now I’m back to the guessing game. What’s worse is the fact that sometimes I try something, see that it gets me closer to what I want, so I make a change to no avail. Then I GO BACK to what I had before to try another direction and now THAT doesn’t work anymore despite the fact that it had just a few minutes ago.
P.S. Any clues as to how the hell I can change the text color for the label of a toggle when it’s got focus? That default dark blue needs to go.
Can you give an example? like a screenshot or the code
Of course!
So currently what I have is that ugly blue color for the label portion of my checkbox toggles. What I want is the pink color you see on the selector menu on the far right so that it stays the same at all times. But I’m not sure of the magic incantation needed to actually select that label under the correct context of the toggle itself being focused.
Couple of pro-tips for the Unity devs while I’m here. If you are going to show us relevant warnings in the console you should probably make the UIBuilder work like a proper child window rather than the janky semi-modal toolbox window that it currently is. Dockable. Minimizable. Able to see and focus other parts of the editor behind it.
It wouldn’t hurt to have something in the properties inspector on the right side showing us a) what the property currently is when set to ‘default’. I.E. Don’t just show us the default value. Show us the ACTUAL value that it will be as the result of the stylesheet chain. And b) what selector and stylesheet is the most recent driver of that value.
Nevermind, I finally found it lol
I just worked my way backwards through the entire tree with every combination I could think of till I found it. Turns out it was “Toggle.unity-toggle:focus .unity-toggle__label”. I’ll stress my comment above. This would have been trivial to solve with a little more info on who was the closest driver of each property.
I think a video tutorial on USS would be great for the community
Hi @Sluggy1 !
So this happens because, as you have found out, Button has the .unity-button class added to it and classes have a higher specificity than types.
By curiosity, which version of Unity are you using? On more recent versions, the “built-in” themes should not prevent you from overriding it, since they should be marked as having lower priorities.
In your case, it might also happen if another selector further down is also a match. You can check on a per-element basis in the UI Builder by selecting it in the hierarchy pane and looking at the “StyleSheet > Matching Selectors” section of the inspector pane. Alternatively, you can also use the UI Toolkit debugger to see the matching selectors.
That should not be the case.
You should be able to do that by using .unity-toggle:focus .unity-toggle__label.
Is the Theme.uss file that you have in your screenshot importing the default style sheet per chance? If that is the case, it would explain why you are not getting the results you are looking for. There again, you can use the UI Toolkit debugger to figure out which selectors are being applied, in which order and their origin.
I agree.
If you are currently editing the selector of a style sheet, the values with a white override bar are the only values that matters, all the other values “don’t exist” and are not being applied anywhere.
If you are currently editing an element, the values with a white override bar indicates an inline style (so a style that will be applied no matter what comes from styles). Values without the white override bar are showing the computed value for each property. So in that sense, they are showing what the value will be as the result of the stylesheet chain. Again, you can see the matching selectors for an element by selecting it and looking at the matching selectors section.
I’m not entirely sure if this has reached the version you are using yet, but on an element, you can hover over the label of a style field and it should give you the following information (see included image):
Hope this helps.
Unity 2022.2.10f1 which is the second-to-latest 2022 patch if I’m not mistaken. Though I know a lot of UITK stuff is being done in 2023 right now and then backported to 2022 so it could still be a bit further behind than it might seem.
I’d entirely forgotten about the debugger! Thanks for the reminder. I have yet to use it but I’m sure it will help with exactly this sort of thing.
Very much! Thank you!
Yeah, while Unity has a great community with lots of people willing to teach and make tutorials, I generally find almost all of them are for absolute beginners. While I’m certainly no expert on this topic I certainly don’t need five different ten-to-twenty minute tutorials on how to add a UIDocument to the scene and then add a single button and label to it lol. It is a bit disappointing that no one seems to have made any videos or articles about more nuanced aspects of this system. The stuff people will actually really struggle with. Fortunately the documentation for UITK does at least seem a little better than some of the other recent additions to the engine and it’s just barely close enough to some industry standards that even a pacled like myself can find a way to make it go.
Hi, I don’t know if you still need some advice but this video helped me a lot to understand complex selectors:
It goes a little bit deeper than the average 20 minutes videos about how to set up you first UI document, but don’t expect too much
