Version: 2023.1
Language : English
Universal selectors
Child selectors

Descendant selectors

USS descendant selectors match elements that are the descendant of another element in the 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
.

Syntax

A descendant selector consists of multiple simple selectors separated by a space:

selector1 selector2 {...}

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 descendant selector style rule matches both the inner element and the first button.

#container1 .yellow {
  background-color: yellow;
}

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

The container2 and the OK button have a yellow background.
The container2 and the OK button have a yellow background.

Note: Heavy use of descendant selectors could negatively affect performance. For more performance guidelines, see Best practices for USS.

Additional resources

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