Version: 2022.3
Language : English
USS selectors
Name selectors

Type selectors

USS type selectors match elements based on their element types. USS type selectors are analogous to CSS type selectors that match HTML tags. For example, Button {...} in USS matches any Button elements in the same way that p {...} in CSS matches any paragraph (<p>) tag.

Syntax

The following is the syntax for a type selector:

TypeName { ... }

When you write type selectors, specify only the concrete object type. Don’t include the namespace in the type name.

For example, this selector is valid:

Button { ... }

This selector is invalid:

UnityEngine.UIElements.Button { ... }

Example

To demonstrate how simple selectors match elements, here is an example UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary
Document.

<UXML xmlns="UnityEngine.UIElements">
  <VisualElement name="container1">
    <VisualElement name="container2" class="yellow">
      <Button name="OK" class="yellow" text="OK" />
      <Button name="Cancel" text="Cancel" />
    </VisualElement>
  </VisualElement>
</UXML>

With no styles applied, the UI looks like the following:

Example buttons with margins and thin blue borders.
Example buttons with margins and thin blue borders.

The following type selector style rule matches the two Button elements:

Button {
  border-radius: 8px;
  width: 100px;
  }

The UI looks like the following when you apply the style:

Example buttons with border radius and specific width.
Example buttons with border radius and specific width.

Additional resources

USS selectors
Name selectors
Copyright © 2023 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961