USS は、以下のような単純なセレクターをサポートします。
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# 型に基づいて一致した要素を見つけます。
ノート |
---|
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
属性の値に基づいて一致する要素を照合します。
VisualElement.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;
}
Class セレクターは、特定の USS クラスが割り当てられた要素を照合します。
ノート |
---|
Class セレクターは、USS でも CSS に機能するのと同じように機能します。 |
構文
クラスセレクターは、クラス名の前にピリオド (.
) を付けたものです。クラス名は、数字で始まることはできません。
.class { ... }
ノート |
---|
ピリオド . は、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{..}
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.