疑似クラス
擬似クラスは、セレクターのスコープを狭め、要素が特定の状態になったときにのみ一致するようにします。
擬似クラスをシンプルセレクターに付加することで、特定の状態にある特定の要素にマッチさせることができます。例えば、以下の USS 規則では、:hover 擬似クラスを使用して、ユーザーがポインターを重ねたときに Button 要素の色を変えます。
Button:hover {
background-color: palegreen;
}
適用される疑似クラス
以下の表はサポートされている擬似クラスを示しています。擬似クラスを拡張したり、カスタムの擬似クラスを作成したりすることはできません。
| 疑似クラス | 要素に一致する状態 |
|---|---|
:hover |
カーソルを要素の上に置く |
:active |
ユーザーがエレメントと相互作用する |
:inactive |
ユーザーが要素との相互作用を停止する |
:focus |
要素にフォーカスがある |
:selected |
USS はこの擬似状態をサポートしません。代わりに :checked を使ってください。 |
:disabled |
要素は無効な状態にあります。 |
:enabled |
要素は有効な状態にあります。 |
:checked |
要素は Toggle または RadioButton の要素で、選択されています。 |
:root |
要素はビジュアルツリーの最上位要素です。 |
疑似クラスの連鎖
疑似クラスを連鎖させることで、複数の同時進行の状態に同じスタイルを適用することができます。例えば、次の USS ルールでは、:checked と :hover 擬似クラスを連鎖させて、ユーザーがポインターを重ねると、チェックされた Toggle 要素の色を変更します。
Toggle:checked:hover {
background-color: yellow;
}
トグルがチェックされていても、ポインターがその上に重なっていないと、セレクターが一致しなくなります。
ルート疑似クラス
:root 疑似クラスは、ビジュアルツリーの最上位の要素に一致します。これは、サポートされている他の疑似クラスとは若干異なります。なぜなら、:root 疑似クラス自体を使用して、スタイルシートが影響を与える要素のデフォルトスタイルを定義するためです。
例えば、以下の USS ルールでは、デフォルトのフォントを設定します。より具体的なスタイルルールからフォントを取得していない要素は、そのフォントを使用します。
:root {
-unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}
:root セレクターの一般的な使い方は、“グローバル” 変数 (カスタムプロパティ) を宣言し、他のスタイルルールが特定の値の代わりに使用できるようにすることです。