子セレクター

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

構文

子セレクターは、> で区切られた 2 つの単純セレクターで構成されています。

selector1 > selector2 {...}

複合セレクターにはワイルドカードセレクターを追加できます。例えば、以下の USS ルールでは、子セレクター にワイルドカードセレクターを使用しています。この USS ルールは、USS クラス yellow が割り当てられた要素の子要素のさらに子要素であるボタンを照合します。

.yellow > * > Button{..}

例

単純セレクターによる要素の照合方法を示すために、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 は以下のようになります。

以下の子セレクターのスタイルルールは、内側の要素のみを照合します。.yellow クラスを持つ要素 #OK は要素 #container2 の子です。#container2 は要素 #container1 の子です。ただし、#OK は #container1 の直接の子孫ではないため、#container1 の子セレクターとともに適用された場合は .yellow セレクターと一致しません。

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

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

追加リソース

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