複数セレクター

複数セレクターとは、複数の単純セレクターを組み合わせたもので、すべての単純セレクターに一致する要素をすべて選択します。

構文

複数セレクターは複数の単純セレクターで構成され、それぞれは区切られていません。

selector1selector2 {...}

USS パーサーは、組み合わせの中の各セレクターを区別できなければ、複数セレクターを解析することはできません。

例えば、以下の USS 規則は 2 つの C# クラスセレクター ListView と Button を組み合わせています。

ListViewButton{...}

USS パーサーは 2 つの要素の型を分離できないため、ListViewButton という 1 つのクラスとして解釈してしまい、思ったとおりの結果が得られません。

USS クラスセレクターと名前セレクターを組み合わせて、複数のセレクターにすることができます。それぞれピリオド (.) と数字記号 (#) が付いているため、パーサーはそれらを明確に識別することができます。型のセレクターには識別文字がありません。そのため、複数のセレクターの中で使用できるのは 1 つだけで、それは以下のように、組み合わせの中の最初のセレクターである必要があります。 例:

ListView.yellow#vertical-list{...}

例

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

以下の名前セレクターのスタイル規則は、最初のボタンに一致します。

Button.yellow {
  background-color: yellow;
}

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

追加リソース

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