疑似クラス
擬似クラスは、セレクターのスコープを狭め、要素が特定の状態になったときにのみ一致するようにします。
疑似クラスを単純セレクターに付加することで、特定の状態にある特定の要素にマッチさせることができます。例えば、以下の 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 プロパティを確認するには、USS プロパティリファレンスを参照してください。
例えば、以下の USS ルールでは、デフォルトのフォントを設定します。スタイルシートをビジュアルツリーのルート要素に適用すると、特別なスタイルルールからフォントを取得していない要素では、そのフォントが使用されます。
:root {
-unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}
ルート疑似クラスでのカスタムプロパティの使用
:root 疑似クラスの一般的な使い方は、“グローバル” な 変数 (カスタムプロパティ) を宣言し、他のスタイルルールが特定の値の代わりに使用できるようにすることです。例えば、色のカスタムプロパティを定義して、それを他のルールで使用することができます。
:root {
--my-color: #ff0000;
}
Button {
background-color: var(--my-color);
}
ルート疑似クラスの一致
CSS では、:root 疑似クラスはルート要素である <HTML> に一致します。USS では、ビジュアルツリー内のルート要素やその他の要素になります。他の要素、またはその要素の子要素とは一致しません。
例えば、以下のような階層があるとします。
var myElement = new VisualElement();
var myElementChild = new VisualElement();
myElement.Add(myElementChild);
var myOtherElement = new VisualElement();
スタイルシートを myElement に追加する場合:
myElement.stylesheets.Add(myStyleSheet);
:root セレクターは myElement に一致しますが、myElementChild と myOtherElement には一致しません。
スタイルシートを myElementChild と myOtherElement に明示的に追加する場合:
myElementChild.stylesheets.Add(myStyleSheet);
myOtherElement.stylesheets.Add(myStyleSheet);
この場合、:root セレクターは myElement、myElementChild、および myOtherElement に一致します。