クラスセレクター
USS クラスセレクターは、特定の USS クラスが割り当てられた要素を照合します。USS クラスセレクターは、CSS クラスセレクターに似ています。
構文
クラスセレクターは、クラス名の前にピリオドを付けたものです。クラス名では大文字と小文字が区別され、数字で始まることはできません。
.className { ... }
ピリオドは、USS ファイルでこのセレクターを記述するときにのみ使用します。UXML や C# ファイルで要素にクラスを割り当てる際には使用しないでください。例えば、<Button class=".yellow" /> を使用しないでください。
一般に、クラス名にはピリオドを使用しないでください。Unity の USS パーサーは、ピリオドを新しいクラスの始まりとして解釈します。例えば、yellow.button というクラスを作成し、.yellow.button{...} という USS 規則を作成するとします。パーサーはセレクターを 複数セレクター として解釈し、.yellow クラスと .button クラスの両方に一致する要素を検索しようとします。
1 つの要素に複数のクラスが割り当てられている場合、セレクターはそのうちの 1 つだけに一致させる必要があります。
セレクターで複数のクラスを指定することもできますが、その場合、要素にそれらのクラスがすべて割り当てられていなければ一致したと照合されません。詳細については、複数セレクター を参照してください。
例
単純セレクターによる要素の照合方法を示すために、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 は以下のようになります。
以下の名前のクラスセレクターのスタイル規則は、要素 container2 とボタン要素 OK に一致し、その背景を黄色に変更します。
.yellow {
background-color: yellow;
}
スタイルを適用すると、UI は以下のようになります。
