Pseudo-classes
Use pseudo-classes with selectors to target elements that are in a specific state.
Read time 3 minutesLast updated a month ago
A pseudo-class narrows a selector's scope so it only matches elements when they enter a specific state.
Append a pseudo-class to a simple selector to match specific elements when they're in a specific state. For example, the following USS rule uses the pseudo-class to change the color of elements when a user hovers the pointer over them.
:hoverButtonButton:hover { background-color: palegreen;}
A Unity Editor window with an OK button that is green, and a blank checkbox.
You can set and get the pseudo-state of an element. For an example, refer to Check pseudo-state of a control.
Supported pseudo-classes
The following table lists supported pseudo-classes. You can't extend pseudo-classes or create custom ones.
Pseudo-class | Matches an element when |
|---|---|
| The cursor is positioned over the element. |
| A user interacts with the element, which is a Button, RadioButton, or Toggle. |
| A user stops to interact with the element. |
| The element has focus. |
| USS doesn't support this pseudo-state. Use |
| The element is in a disabled state. |
| The element is in an enabled state. |
| The element is a Toggle or RadioButton element and it's selected. |
| The element is the highest-level element in the visual tree that has the stylesheet applied. |
Chain pseudo-classes
You can chain pseudo-classes together to apply the same style for multiple concurrent states. For example, the following USS rule chains the and pseudo-classes together to change the color of checked elements when a user hovers the pointer over them.
:checked:hoverToggleToggle:checked:hover { background-color: yellow;}
A Unity Editor window with an OK button, and a yellow highlighted checkbox with a mouse cursor on it.
When the toggle is checked, but the pointer isn't hovering over it, the selector no longer matches.
A Unity Editor window with an OK button, and a checkbox with no highlight.
The root pseudo-class
The pseudo-class matches the highest-level element that the stylesheet is applied to.
:rootSet default values with the root pseudo-class
You can use the pseudo-class to set default style values for inherited styles across elements. To see which USS properties are inherited, refer to the USS properties reference.
:rootFor example, the following USS rule sets a default font. If you apply the stylesheet to the root element in the visual tree, any element that doesn't get its font from a more specific style rule uses that font.
:root { -unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");}
Use custom properties with the root pseudo-class
A common use for the pseudo-class is to declare “global” variables (custom properties), that other style rules can use instead of specific values. For example, you can define a custom property for a color and use it in other rules:
:root:root { --my-color: #ff0000;}Button { background-color: var(--my-color);}
The root pseudo-class matching
In CSS, the pseudo-class matches the root element, which is . In USS, it can be the root element or any other element in the visual tree. It doesn't match other elements or the child elements of that element.
:root<HTML>For example, if you have the following hierarchy:
var myElement = new VisualElement();var myElementChild = new VisualElement();myElement.Add(myElementChild);var myOtherElement = new VisualElement();
If you add the stylesheet to :
myElementmyElement.stylesheets.Add(myStyleSheet);
The selector matches but not and .
:rootmyElementmyElementChildmyOtherElementIf you add explicitly the stylesheet to and :
myElementChildmyOtherElementmyElementChild.stylesheets.Add(myStyleSheet);myOtherElement.stylesheets.Add(myStyleSheet);
In this case, the selector matches , , and .
:rootmyElementmyElementChildmyOtherElement