USS のクラスセレクターは、特定の USS クラスが割り当てられている要素を照合します。USS のクラスセレクターは CSS のクラスセレクターに似ています。
クラスセレクターは、クラス名の頭にピリオド (.) を付け足したものです。クラス名は、大文字と小文字の区別があり、数字で始まることはできません。
.className { ... }
USS ファイルにセレクターを記述する場合にのみピリオドを使用してください。UXML あるいは C# ファイルの要素にクラスを割り当てる時はピリオドを使用しないでください。例えば、<Button class=".yellow" />
は使用しないでください。
基本的に、クラス名にはピリオドを含めないでください。Unity の USS パーサーは、ピリオドを新しいクラスの始まりとして解釈します。例えば、yellow.button
というクラスを作成し、.yellow.button{...}
という USS 規則を作成した場合、パーサーは、このセレクターを 複数セレクター として解釈し、.yellow
クラスと .button
クラスの両方に一致する要素を見つけようとします。
1 つの要素に複数のクラスが割り当てられている場合、セレクターでそのうち 1 つが一致すれば要素のマッチになります。
1 つのセレクター内で複数のクラスを指定することもできます。その場合、要素にそれら全てのクラスが割り当てられていないとマッチになりません。詳しくは、複数セレクター を参照してください。
単純なセレクターがどのように要素を検出するかを示すために、UI ドキュメントの例を示します。
<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 は以下のようになります。
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.