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.

Complex selectors

The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.

Pseudo-classes

The table below provides a quick reference of USS simple selectors. For details, see Pseudo-classes.

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

Determining 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 vs. 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.

Overriding USS selectors

Styles that you apply directly to an element override styles that you apply via USS.

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.

• 2020–04–07 Page amended
• 2018–11–02 Page amended