Version: 2021.3
言語: 日本語
Style UI with USS
シンプルセレクター

USS セレクター

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

USS は、以下のようないくつかのタイプの 単純 および複合 セレクターをサポートしており、以下のような基準に基づいて要素をマッチングします。

  • 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 複合セレクターと擬似クラスのサブセットもサポートしています。

単純セレクター

下の表は、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 要素はルート要素 (ビジュアルツリーの最上位要素)

Use selector lists

複数のタイプの要素に同じスタイルを適用するために、任意のスタイルルールでセレクターリストを使用できます。セレクターリストは、カンマで区切られた 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;
}

Determine selector precedence

ある要素が複数のセレクターに一致する場合、Unity はいくつかの要因を考慮してどのセレクターを優先するかを決定します。

Unity がどのように優先順位を決定するかは、競合するセレクターが同じスタイルシートにあるか、異なるスタイルシートにあるかによって異なります。

同じスタイルシート内のセレクターの優先順位

ある要素が同じスタイルシートの複数のセレクターに一致する場合、最も高い 特殊性 を持つセレクターが優先されます。

両方のセレクターが同じ 特殊性 を持つ場合、USS ファイルで最後に表示されたセレクターが優先されます。

異なるスタイルシート内のセレクターの優先順位

ある要素が異なるスタイルシートの複数のセレクターに一致する場合、Unity は以下の要因に応じて以下の順序で優先順位を決定します。

  1. スタイルシートのタイプ: ユーザー定義のスタイルシートのセレクターは、デフォルトの Unity スタイルシートのセレクターよりも優先されます。
  2. セレクターの特殊性: 両方のセレクターが同じタイプのスタイルシートにある場合、特殊性 が最も高いセレクターが優先されます。
  3. 要素階層内のスタイルシートの位置: 両方のセレクターが同じ特殊性を持つ場合、スタイルシートが要素階層内で最も低い位置にあるセレクターが優先されます。
  4. スタイルシート内のセレクターの位置: 同じ階層レベルにある複数のスタイルシートを適用する場合、USS ファイルの最後に最も近いところに表示されるセレクターが優先されます。

Selector specificity

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

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

Applied styles versus inherited styles

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

Override USS selectors

要素に直接適用したスタイルは、USS で適用したスタイルよりも優先されます。

Note: USS does not support the !important rule used to override style declarations in CSS.

インラインスタイル

UXML ドキュメント内の要素に適用するインラインスタイルは、USS スタイルよりも優先されます。USS セレクターよりも特殊性が高いと考えることができます。

C# スタイル

C# で設定するスタイルは、USS スタイルやインラインスタイルなど、他のすべてのスタイルをオーバーライドします。C# で設定するスタイルは、特殊性が最も高いと考えることができます。

Style UI with USS
シンプルセレクター