Version: 2022.1
Style UI with USS
USS selectors

Introduction to USS

A Unity Style Sheet (USS) is a text file recognized as an asset that supports style rules. The USS text file must have the .uss extension.

A USS consists of the following:

  • Style rules that include a selector and a declaration block.
  • Selectors that identify which visual elementA node of a visual tree that instantiates or derives from the C# VisualElement class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
    See in Glossary
    the style rule affects.
  • A declaration block, inside curly braces, that has one or more style declarations. Each style declaration has a property and a value. Each style declaration ends with a semi-colon.

Syntax

The following is the general syntax of a style rule:

selector {
  property1: value;
  property2: value;
}

Style matching with rules

When you define a style sheet, you can apply it to a visual treeAn object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
See in Glossary
. Selectors match against elements to resolve which properties apply from the USS file. If a selector matches an element, the style declarations apply to the element.

For example, the following rule matches any Button object:

Button {
  width: 200px;
}

Supported selector types

USS supports several types of simple and complex selectors that match elements based on different criteria, such as the following:

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

USS also supports pseudo classes that you can use with selectors to target elements that are in a specific state or select the :root element.

If an element matches more than one selector, USS applies the styles from whichever selector takes precedence.

Simple selectors

USS supports a set of simple selectors that are analogous, but not identical, to simple selectors in CSS. The following table provides a quick reference of USS simple selectors.

Selector type Syntax Matches
Type selector Type {...} Elements of a specific C# or visual element type.
Class selector .class {...} Elements with an assigned USS class.
Name selector #name {..} Elements with an assigned name attribute.
Universal selector * {...} Any elements.

Complex selectors

USS supports a subset of CSS complex selectors. The following table provides a quick reference of USS complex selectors.

Selector type Syntax Matches
Descendant selector selector1 selector2 {...} Elements that are the descendant of another element in the visual tree.
Child selector selector1 > selector2 {...} Elements that are the children of another element in the visual tree.
Multiple selector selector1selector2 {...} Elements that match all the simple selectors.

Additional resources

Style UI with USS
USS selectors