セレクターは、USS ルールがどの要素に影響を与えるかを決定します。スタイルシートがビジュアルツリーに適用されるときに、要素とセレクターを照合します。ある要素がセレクターに一致すると、Unity はセレクターのスタイルルールをその要素に適用します。
USS は、以下のようないくつかのタイプの 単純 および複合 セレクターをサポートしており、以下のような基準に基づいて要素をマッチングします。
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 複合セレクターと擬似クラスのサブセットもサポートしています。
下の表は、USS のシンプルセレクターのクイックリファレンスです。詳細は、単純セレクター を参照してください。
| セレクタータイプ | 構文 | 一致するもの |
|---|---|---|
| C# 型 | Type {...} |
特定の C# 型の要素 |
| USS クラス | .class {...} |
割り当てられた USS クラスを持つ要素 |
| 名前 | #name {..} |
割り当てられた name 属性を持つ要素 |
| ワイルドカード | * {...} |
すべての要素 |
下の表は、USS の複合セレクターのクイックリファレンスです。詳細は、複合セレクター を参照してください。
| セレクタータイプ | 構文 | 一致するもの |
|---|---|---|
| 子孫セレクター | selector1 selector2 {...} |
最初のセレクターの子孫 (レベルは問わない) で、2 番目のセレクターにも一致するものすべて。 |
| 子セレクター | selector1 > selector2 {...} |
最初のセレクターの 直接の 子孫 (子) で、2 番目のセレクターにも一致するものすべて。 |
| セレクターリスト | selector1, selector2, selector3 {..} |
リスト内の任意のセレクターに一致するすべての要素。リスト内の任意のセレクターにマッチする要素すべて。リストには、単純セレクターと複合セレクターを自由に組み合わせることができます。 |
下の表は、USS の単純セレクターのクイックリファレンスです。詳細は、単純セレクター を参照してください。
| 疑似クラス | 要素に一致する状態 |
|---|---|
:hover |
カーソルを要素の上に置く |
:active |
ユーザーがエレメントと相互作用する |
:inactive |
ユーザーが要素との相互作用を停止する |
:focus |
要素にフォーカスがある |
:selected |
N/A. Unity does not support this pseudo-state. Use :checked instead. |
: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 で適用したスタイルよりも優先されます。
Note: USS does not support the !important rule used to override style declarations in CSS.
UXML ドキュメント内の要素に適用するインラインスタイルは、USS スタイルよりも優先されます。USS セレクターよりも特殊性が高いと考えることができます。
C# で設定するスタイルは、USS スタイルやインラインスタイルなど、他のすべてのスタイルをオーバーライドします。C# で設定するスタイルは、特殊性が最も高いと考えることができます。