シンプルセレクター

USS セレクター

複合セレクター

USS は、以下のような単純なセレクターをサポートします。

C# 型 セレクターは、特定のC# 型要素に一致するものを見つけます。
USS クラス セレクターは、割り当てられた USS クラスに一致するものを見つけます。
Name セレクターは、name 属性が割り当てられた要素に一致するものを見つけます。
ユニバーサルセレクター は、任意の要素に一致するものを見つけます。

シンプルセレクターを組み合わせて複合セレクターにしたり、擬似クラスを付加したりして、特定の状態の要素を対象にすることができます。

このページでは、シンプルセレクターの各タイプについて説明し、構文と例を示します。また、以下の UXML 文書を使って、シンプルセレクターがどのように一致する要素を見つけるかを説明します。

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

スタイルが適用されていない場合、UXML 構文は以下のような UI を生成します。

ノート
画像の例では、個々の要素を識別しやすくするために、余白や薄い青の境界線を入れています。

C# 型セレクター

C# 型セレクターは、C# 型に基づいて一致した要素を見つけます。

ノート
USS の型セレクターは、HTML タグに一致させる CSS の型セレクターと類似しています。例えば、USS の `Button {...}` は、C# の `Button` 型のあらゆる要素に一致します。これは、CSS の `p {...}` があらゆる段落 (`<p>`) タグに相当するのと同じです。

構文

C# の型セレクターは、C# の型名をそのまま書いたものです。

TypeName {...}

C# の型セレクターを使用する場合は、具体的なオブジェクトの型のみを指定します。TypeName (型名) に名前空間を加えないでください。

例えば、このセレクターは有効です。

Button { ... }

このセレクターは有効ではありません。

UnityEngine.UIElements.Button { ... }

例

上記の UXML ドキュメント例に関して、以下のスタイル規則は、2 つの Button 要素に一致します。

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

Name セレクター

Name セレクターは、割り当てられた name 属性の値に基づいて一致する要素を照合します。

C# では、VisualElement.name を使って要素の名前を設定します。
UXML では、要素に name 属性 <VisualElement name="my-nameName"> を加えることができます。

Unity では、名前の規則を強制していませんが、パネル内で要素の名前を一意にする必要があります。一意でない名前を使用すると、予期しない一致が発生する可能性があります。

ノート
USS の Name セレクターは、特定の `id` 属性を持つ要素に一致する CSS ID セレクターに類似しています。

構文

Name セレクターは、要素に割り当てられた名前の前に、数字の記号 (#) を付けたものです。

# name { ... }

ノート
数字記号 # は、USS ファイルでセレクターを記述するときのみ使用します。UXML や C# ファイルで要素に名前を割り当てるときには使わないでください。番号記号を含む要素名は無効です。例えば、`<Button name="OK" />` は有効ですが、`<Button name="#OK" />` は無効です。

例

上記の UXML ドキュメント例に関して、以下のスタイル規則は、2 番目の Button 要素に一致します。

# Cancel {
    border-width: 2px;
    border-color: DarkRed;
    background-color: pink;
}

USS クラスセレクター

Class セレクターは、特定の USS クラスが割り当てられた要素を照合します。

ノート
Class セレクターは、USS でも CSS に機能するのと同じように機能します。

構文

クラスセレクターは、クラス名の前にピリオド (.) を付けたものです。クラス名は、数字で始まることはできません。

.class { ... }

ノート
ピリオド `.` は、USS ファイルでこのセレクターを記述するときにのみ使用します。UXML や C# ファイルで要素にクラスを割り当てる際には使わないでください。
例えば、`<Button class="yellow" />` を使用し、`<Button class=".yellow" />` は使用しないでください。また、クラス名にピリオド (.) を使用することは避けてください。Unity の USS パーサーは、ピリオドを新しいクラスの始まりとして解釈します。例えば、`yellow.button` というクラスを作成し、次のような USS 規則を作成したとします。 `.yellow.button{...}` パーサーは、セレクターをマルチプルセレクターと解釈し、`.yellow` クラスと `.button` クラスの両方に合う要素を探そうとします。

ノート

ピリオド . は、USS ファイルでこのセレクターを記述するときにのみ使用します。UXML や C# ファイルで要素にクラスを割り当てる際には使わないでください。

例えば、<Button class="yellow" /> を使用し、<Button class=".yellow" /> は使用しないでください。

また、クラス名にピリオド (.) を使用することは避けてください。Unity の USS パーサーは、ピリオドを新しいクラスの始まりとして解釈します。

例えば、yellow.button というクラスを作成し、次のような USS 規則を作成したとします。

.yellow.button{...}

パーサーは、セレクターをマルチプルセレクターと解釈し、.yellow クラスと .button クラスの両方に合う要素を探そうとします。

1 つの要素に複数のクラスが割り当てられている場合、セレクターはそのうちの 1 つだけに一致させる必要があります。

セレクターで複数のクラスを指定することもできますが、その場合、要素にそれらのクラスがすべて割り当てられていなければ一致したと照合されません。詳しくは、複数のセレクターを参照してください。

例

上の UXML ドキュメント例に関して、以下のスタイル規則は、 container2 という名の要素と OK という名のボタンに一致し、それらの背景色を黄色にします。

.yellow {
    background-color: yellow;
}

ユニバーサルセレクター

ユニバーサルセレクターは、ワイルドカードセレクターとも呼ばれ、あらゆる要素を照合します。

構文

* { ... }

例

上の UXML ドキュメントの例では、以下のスタイル規則がすべての要素に一致し、その背景色を黄色に変更しています。スタイルシートはウィンドウのルート要素に適用されるため、これにはウィンドウのメインエリアも含まれます。

* {
    background-color: yellow;
}

ノート
ユニバーサルセレクターはすべての要素をテストするため、パフォーマンスに影響を与える可能性があります。控えめに使用してください。ユニバーサルセレクターと子孫セレクターの併用は避けてください。この組み合わせを使用すると、システムは多くの要素を繰り返しテストする場合があり、パフォーマンスに影響を与える可能性があります。

ノート

ユニバーサルセレクターはすべての要素をテストするため、パフォーマンスに影響を与える可能性があります。控えめに使用してください。ユニバーサルセレクターと子孫セレクターの併用は避けてください。この組み合わせを使用すると、システムは多くの要素を繰り返しテストする場合があり、パフォーマンスに影響を与える可能性があります。

複合セレクターでのユニバーサルセレクターの使用

ユニバーサルセレクターを、複合セレクターに加えることができます。例えば、以下の USS ルールでは、子セレクターの中で使用し、USS クラス yellow が割り当てられた要素の子であるすべてのボタンが一致します。

.yellow > * > Button{..}

USS セレクター

複合セレクター