セレクターは、USS ルールがどの要素に影響を与えるかを決定します。スタイルシートがビジュアルツリーに適用されるときに、要素とセレクターを照合します。ある要素がセレクターに一致すると、Unity はセレクターのスタイルルールをその要素に適用します。
USS supports several types of simple and complex selectors that match elements based on different criteria, such as:
name
プロパティIt also supports pseudo classes that you can use with selectors to target elements that are in a specific state.
ある要素が複数のセレクターに一致する場合、Unity は 優先 されるセレクターのスタイルを適用します。
USS は、CSS の単純セレクターと類似していても同一ではない、一連の単純セレクターをサポートしています。それは、CSS 複合セレクターと擬似クラスのサブセットもサポートしています。
The table below provides a quick reference of USS simple selectors. For details, see Simple selectors.
セレクタータイプ | 構文 | 一致するもの |
---|---|---|
C# 型 | Type {...} |
特定の C# 型の要素 |
USS クラス | .class {...} |
割り当てられた USS クラスを持つ要素 |
名前 | #name {..} |
割り当てられた name 属性を持つ要素 |
ワイルドカード | * {...} |
すべての要素 |
The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.
セレクタータイプ | 構文 | 一致するもの |
---|---|---|
子孫セレクター | selector1 selector2 {...} |
最初のセレクターの子孫 (レベルは問わない) で、2 番目のセレクターにも一致するものすべて。 |
子セレクター | selector1 > selector2 {...} |
最初のセレクターの 直接の 子孫 (子) で、2 番目のセレクターにも一致するものすべて。 |
セレクターリスト | selector1, selector2, selector3 {..} |
Any element that matches any selectors in the list. Any element that matches any selectors in the list. A list can contain any mix of simple and/or complex selectors. |
The table below provides a quick reference of USS simple selectors. For details, see Pseuso-classes.
疑似クラス | 要素に一致する状態 |
---|---|
:hover |
カーソルを要素の上に置く |
:active |
ユーザーがエレメントと相互作用する |
:inactive |
ユーザーが要素との相互作用を停止する |
:focus |
要素にフォーカスがある |
:selected |
該当なし。Unity はこの疑似状態を使用しません。 |
:disabled |
要素を enabled == false に設定する |
:enabled |
要素を enabled == true に設定する |
:checked |
要素はトグル要素であり、オンに切り替える |
:root |
要素はルート要素 (ビジュアルツリーの最上位要素) |
複数のタイプの要素に同じスタイルを適用するために、任意のスタイルルールでセレクターリストを使用できます。セレクターリストは、カンマで区切られた 2 つ以上のセレクターで構成されています。セレクターリストでは、単純セレクターと複合セレクターを自由に組み合わせることができ、リスト内の少なくとも 1 つのセレクターに一致する要素すべてに一致します。
構文
selector1, selector2 {...}
セレクターリストは、それぞれが同じスタイルルールを宣言する複数のセレクターに相当します。
例
上記の UXML ドキュメント例 に関して、以下の 2 つの USS スニペットは同じ効果をもちます。
# container2, Button {
background-color: pink;
border-radius: 10px;
}
# container2 {
background-color: pink;
border-radius: 10px;
}
Button {
background-color: pink;
border-radius: 10px;
}
ある要素が複数のセレクターに一致する場合、Unity はいくつかの要因を考慮してどのセレクターを優先するかを決定します。
Unity がどのように優先順位を決定するかは、競合するセレクターが同じスタイルシートにあるか、異なるスタイルシートにあるかによって異なります。
ある要素が同じスタイルシートの複数のセレクターに一致する場合、最も高い 特殊性 を持つセレクターが優先されます。
両方のセレクターが同じ 特殊性 を持つ場合、USS ファイルで最後に表示されたセレクターが優先されます。
ある要素が異なるスタイルシートの複数のセレクターに一致する場合、Unity は以下の要因に応じて以下の順序で優先順位を決定します。
セレクターの特殊性は、関連性の指標です。特殊性が高いほど、セレクターが一致する要素との関連性が高いことを意味します。
*
) セレクターよりも具体的です。たとえ、継承したスタイルがより高い特殊性を持つセレクターで定義されていても、要素を直接ターゲットにしたスタイルは、その要素が継承したスタイルよりも優先されます。
要素に直接適用したスタイルは、USS で適用したスタイルよりも優先されます。
ノート |
---|
USS は、CSS のスタイル宣言のオーバーライドに使用される !important 規則をサポートしていません。 |
UXML ドキュメント内の要素に適用するインラインスタイルは、USS スタイルよりも優先されます。USS セレクターよりも特殊性が高いと考えることができます。
C# で設定するスタイルは、USS スタイルやインラインスタイルなど、他のすべてのスタイルをオーバーライドします。C# で設定するスタイルは、特殊性が最も高いと考えることができます。
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.