スタイルと Unity スタイルシート

シンプルセレクター

USS セレクター

セレクターは、USS ルールがどの要素に影響を与えるかを決定します。スタイルシートがビジュアルツリーに適用されるときに、要素とセレクターを照合します。ある要素がセレクターに一致すると、Unity はセレクターのスタイルルールをその要素に適用します。

USS supports several types of simple and complex selectors that match elements based on different criteria, such as:

C# のクラス名
割り当てられた name プロパティ
USS クラスのリスト
ビジュアルツリーにおける要素の位置と、他の要素との関係

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 は以下の要因に応じて以下の順序で優先順位を決定します。

スタイルシートのタイプ: ユーザー定義のスタイルシートのセレクターは、デフォルトの Unity スタイルシートのセレクターよりも優先されます。
セレクターの特殊性: 両方のセレクターが同じタイプのスタイルシートにある場合、特殊性が最も高いセレクターが優先されます。
要素階層内のスタイルシートの位置: 両方のセレクターが同じ特殊性を持つ場合、スタイルシートが要素階層内で最も低い位置にあるセレクターが優先されます。
The selectors’ positions in their style sheets: If both style sheets are applied at the same level of the hierarchy, the selector that appears closest to the end of its USS file takes precedence.

セレクターの特殊性

セレクターの特殊性は、関連性の指標です。特殊性が高いほど、セレクターが一致する要素との関連性が高いことを意味します。

名前セレクターは Class セレクターよりも具体的です。
クラス セレクターは C# 型 セレクターよりも具体的です。
C# 型 セレクターは ワイルドカード (*) セレクターよりも具体的です。

適用されたスタイルと継承されたスタイル

たとえ、継承したスタイルがより高い特殊性を持つセレクターで定義されていても、要素を直接ターゲットにしたスタイルは、その要素が継承したスタイルよりも優先されます。