子孫セレクター

USS の子孫セレクターは、ビジュアルツリー 内の別の要素の子孫である要素を検出します。

構文

子孫セレクターは、スペースで区切られた複数の単純セレクターで構成されます。

selector1 selector2 {...}

例

単純セレクターによる要素の照合方法を示すために、UI 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>

スタイルを適用しない場合、UI は以下のようになります。

以下の子孫セレクターのスタイルルールは、内部要素と最初のボタンの両方を検出します。

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

スタイルを適用する UI は以下のようになります。

ノート: 子孫セレクターを頻繁に使用すると、パフォーマンスに悪影響を与える可能性があります。パフォーマンスに関するガイドラインの詳細は、USS のベストプラクティス を参照してください。

追加リソース

• USS のベストプラクティス