Version: 2020.3
言語: 日本語
複合セレクター
USS プロパティタイプ

疑似クラス

擬似クラスは、セレクターのスコープを狭め、要素が特定の状態になったときにのみ一致するようにします。

擬似クラスをシンプルセレクターに付加することで、特定の状態にある特定の要素にマッチさせることができます。例えば、以下の USS 規則では、:hover 擬似クラスを使用して、ユーザーがポインターを重ねたときに Button 要素の色を変えます。

Button:hover {
    background-color: palegreen;
}

適用される疑似クラス

下の表は、Unity がサポートする疑似クラスの一覧です。疑似クラスを拡張したり、カスタムのクラスを作成することはできません。

疑似クラス 要素に一致する状態
:hover カーソルを要素の上に置く
:active ユーザーがエレメントと相互作用する
:inactive ユーザーが要素との相互作用を停止する
:focus 要素にフォーカスがある
:selected 該当なし。Unity はこの疑似状態を使用しません。
:disabled 要素を enabled == false に設定する
:enabled 要素を enabled == true に設定する
:checked 要素はトグル要素であり、オンに切り替える
:root 要素はルート要素 (ビジュアルツリーの最上位要素)

疑似クラスの連鎖

疑似クラスを連鎖させることで、複数の同時進行の状態に同じスタイルを適用することができます。例えば、次の USS ルールでは、:checked:hover 擬似クラスを連鎖させて、ユーザーがポインターを重ねると、チェックされた Toggle 要素の色を変更します。

Toggle:checked:hover {
  background-color: yellow;
}

トグルがチェックされていても、ポインターがその上に重なっていないと、セレクターが一致しなくなります。

ルート疑似クラス

:root 疑似クラスは、ビジュアルツリーの最上位の要素に一致します。これは、サポートされている他の疑似クラスとは若干異なります。なぜなら、:root 疑似クラス自体を使用して、スタイルシートが影響を与える要素のデフォルトスタイルを定義するためです。

例えば、以下の USS ルールでは、デフォルトのフォントを設定します。より具体的なスタイルルールからフォントを取得していない要素は、そのフォントを使用します。

:root {
  -unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}

:root セレクターの一般的な使い方は、“グローバル” 変数 (カスタムプロパティ) を宣言し、他のスタイルルールが特定の値の代わりに使用できるようにすることです。


複合セレクター
USS プロパティタイプ