Version: 2019.2
スタイルと Unity スタイルシート
USS Properties types

USS セレクター

セレクターを説明するために、ここでは以下のビジュアルツリーの例を使用します。

サンプルの階層
サンプルの階層

単純セレクター

単純セレクターにはワイルドカードまたは、型、名前、クラス名の組み合わせを使用できます。以下は、上のビジュアルツリーの例に基づいた単純セレクターの例です。

  • #container1
  • VisualElement
  • VisualElement#container1
  • VisualElement.yellow
  • Button#OK.yellow:hover

TypeName {...}

C# の型に基づいて一致する要素を探すには、Type セレクターを使用します。例えば、Button は 2 つのボタンに一致します。

Type セレクターを使用する場合は、具体的なオブジェクトの型のみを指定します。TypeName に名前空間を加えないでください。

名前

#name {...}

VisualElement.name プロパティーの値に基づいて一致する要素を探すには、Name セレクターを使用します。例えば、#Cancel はその名前に基づいて 2 番目のボタンに一致します。

要素名はパネル内で一意である必要があります。これは推奨であり必須ではありませんが、一意でない名前を使用すると予期しない一致が発生する可能性があります。

名前を要素に割り当てるときに # を加えないでください。

クラス

.class {...}

特定のクラスに一致する (そのクラスが割り当てられた) 要素を探すには、Class セレクターを使用します。

一致する要素を探すには、要素に割り当てられたすべてのクラスを指定する必要はありません。1 つのクラス名を指定すると、同じクラスが割り当てられた要素すべてを探します。例えば、.yellowcontainer2 という名前の要素と OK という名前のボタン要素に一致します。

1 つのセレクタで複数のクラスを指定する場合、要素を一致させるには、同じクラス名を割り当てる必要があります。

クラス名を要素に指定するときに . を加えないでください。

クラス名は数字で始めることはできません。

ワイルドカード

* { ... }

すべての要素に一致します。

疑似状態

:pseudo-state { ... }

要素が疑似状態になったときに要素を照合するには、pseudo-state を使用します。例えば、Button:hoverButton タイプの視覚要素に一致します。ただし、それはユーザーが視覚要素の上にカーソルを置いている場合のみです。

サポートされる擬似状態は以下の通りです。

  • hover: カーソルがビジュアル要素の上をホバリングしている。
  • active: 視覚要素が相互作用している。
  • inactive: 視覚要素はもはや相互作用していない。
  • focus: 視覚要素にフォーカスがある。
  • selected: 未対応
  • disabled: 視覚要素が enabled == false に設定されている。
  • enabled : the visual element is set to enabled == true.
  • checked: 視覚要素が Toggle 要素であり、有効になっている。
  • root : the highest-level visual element in the tree.

Pseudo-states are specified after other simple selectors. Pseudo-states cannot be extended. There is only a predefined set of supported pseudo-states.

複合セレクター

複合セレクターは、区切り記号を持つ単純セレクターの組み合わせです。複合セレクターにはセレクターリストも含まれています。セレクターリストは同じスタイルを多くの要素に簡単に適用することができます。

記号

UIElement は以下の記号をサポートします。

  • スペースは要素のすべての子孫に一致します。
  • > は、前のセレクターに一致した要素の直接の子孫である視覚要素に適用されます。

例えば以下の通りです。

  • #container1 .yellow: 内部の要素と最初のボタンの両方に一致します。
  • #container2 > .yellow: 内部の要素のみに一致します。

セレクターリスト

セレクターリストを使用して、同じスタイル定義を多くの要素に適用します。各セレクターはカンマで区切られ、単純セレクターまたは複合セレクターです。

例えば以下の通りです。

#container1, Button { padding-top:10 }

上記は以下と同じ

#container1 { padding-top: 10 } Button { padding-top: 10}

セレクターの優先順位

複数のセレクターが同じ要素に一致する場合は、最も特定性の高いセレクターが優先されます。単純セレクターの場合、基本的な特定性のルールは以下のとおりです。

  • Name は Class より具体的です
  • Class は Type より具体的です
  • Type は * より具体的です
  • ワイルドカード *

If two selectors are equal within the same style sheet, the selector that appears last in the file takes precedence.

To determine selector specificity across different files, the algorithm first prioritizes selectors from user defined style sheets over default style sheets provided by Unity.

The second way to resolve the precedence the order in which the tree is traversed for style application. Style sheets attached to elements with higher depth and sibling index take precedence.

Note that the !important keyword is ignored.

Finally, values set in C# always have the highest specificity and will override any styles from USS.


  • 2018–11–02 Page amended
スタイルと Unity スタイルシート
USS Properties types