USS selectors

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:

• C# class name
• An assigned name property
• A list of USS classes
• The element’s position in the visual tree and its relationship to other elements.

It 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.

Supported selector types

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.

Simple selectors

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

Complex selectors

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.

Pseudo-classes

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).

Use selector lists

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;
}

Determine selector precedence

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.

Precedence for selectors in the same style sheet

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.

Precedence for selectors in different style sheets

When an element matches multiple selectors in different style sheets, Unity determines precedence according to the following factors in the following order:

1. The type of style sheet: selectors from user-defined style sheets takes precedence over selectors from default Unity style sheets.
2. Selector specificity: If both selectors are in the same type of style sheet, the selector with the highest specificity takes precedence
3. The style sheets’ positions in the element hierarchy: If both selectors have the same specificity, the selector whose style sheet is applied lowest in the element hierarchy takes precedence.
4. The selectors’ positions in their style sheets: If you apply both style sheets at the same level of the hierarchy, the selector that appears closest to the end of its USS file takes precedence.

Selector specificity

Selector specificity is a measure of relevance. The higher the specificity, the more relevant the selector is to the elements it matches.

• Name selectors are more specific than Class selectors.
• Class selectors are more specific than C# Type selectors.
• C# Type selectors are more specific than the wildcard (*) selector.

Applied styles versus inherited styles

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.

Override USS selectors

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

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.

C# styles

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.