Selectors determine which elements USS rules affect. When Unity applies a style sheet to a visual tree, it matches elements to selectors. If an element matches a selector, Unity applies the selector’s style rule to the element.
USS supports several types of simple and complex selectors that match elements based on different criteria, such as:
name propertyIt also supports pseudo classes that you can use with selectors to target elements that are in a specific state.
If an element matches more than one selector, Unity applies the styles from whichever selector takes precedence.
USS supports a set of simple selectors that are analogous, but not identical, to simple selectors in CSS. It also supports a subset of CSS complex selectors and pseudo-classes.
The table below provides a quick reference of USS simple selectors. For details, see Simple selectors.
| Selector type: | Syntax: | Matches: |
|---|---|---|
| C# type | Type {...} |
Elements of a specific C# type |
| USS class | .class {...} |
Elements with an assigned USS class |
| Name | #name {..} |
Elements with an assigned name attribute |
| Wildcard | * {...} |
Any element |
The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.
| Selector type: | Syntax: | Matches: |
|---|---|---|
| Descendant selector | selector1 selector2 {...} |
Any descendants of the first selector, at any level, that also match the second selector. |
| Child selector | selector1 > selector2 {...} |
Any direct descendants (children) of the first selector that also match the second selector. |
| Selector list | selector1, selector2, selector3 {..} |
Any element that matches any selectors in the list. Any element that matches any selectors in the list. A list can contain any mix of simple or complex selectors. |
The table below provides a quick reference of USS simple selectors. For details, see Pseudo-classes.
| Pseudo-class | Matches an Element when |
|---|---|
:hover |
The cursor is positioned over the Element. |
:active |
A user interacts with the Element. |
:inactive |
A user stops interacting with the element. |
:focus |
The element has focus. |
:selected |
N/A. Unity does not use this pseudo-state. |
:disabled |
The Element is set to enabled == false. |
:enabled |
The Element is set to enabled == true. |
:checked |
The Element is a Toggle element and it is toggled on. |
:root |
The Element is the root element (highest-level Element in the visual tree). |
To apply the same style to several types of elements, you can use a selector list in any style rule. A selector list consists of two or more selectors separated by commas. It can contain any combination of simple and complex selectors, and matches any element that matches at least one selector in the list.
Syntax:
selector1, selector2 {...}
A selector list is equivalent to multiple selectors that each declare the same style rule.
Example:
For the example UXML document above, the following two USS snippets have the same effect.
#container2, Button {
background-color: pink;
border-radius: 10px;
}
#container2 {
background-color: pink;
border-radius: 10px;
}
Button {
background-color: pink;
border-radius: 10px;
}
When an element matches more than one selector, Unity considers several factors to determine which selector takes precedence.
How Unity determines precedence depends on whether the conflicting selectors are in the same style sheet or in different style sheets.
When an element matches multiple selectors from the same style sheet, the selector with the highest specificity takes precedence.
If both selectors have the same specificity, the selector that appears last in the USS file takes precedence.
When an element matches multiple selectors in different style sheets, Unity determines precedence according to the following factors in the following order:
Selector specificity is a measure of relevance. The higher the specificity, the more relevant the selector is to the elements it matches.
*) selector.Styles that target an element directly take precedence over styles that the element inherits, even if the inherited styles are defined in a selector with higher specificity.
Styles that you apply directly to an element override styles that you apply via USS.
Note: USS does not support the !important rule used to override style declarations in CSS.
Inline styles that you apply to elements in a UXML document take precedence over USS styles. You can think of them as having higher specificity than USS selectors.
Styles that you set in C# override any other styles, including USS styles and inline styles. You can think of them as having the highest specificity.