【Unity】【UI Toolkit】USSで複雑なセレクタを指定する方法まとめ

Unity UIToolKit

UnityのUI ToolkitのUSSで複雑なセレクタを指定する方法についてまとめました。

はじめに

本記事では、USSで複雑なセレクタを指定する方法についてまとめます。

以前、以下の記事に本記事の内容の一部分を取り上げましたが、あらためてこの記事に切り出してちゃんとまとめます。

light11.hatenadiary.com

USSの基本的な使い方については前提知識としますので、必要に応じて上記の記事を参照してください。

レイアウトを作る

まず動作確認用に、以下のようなレイアウトを組みます。

レイアウト

UXMLは以下の通りです。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <ui:VisualElement name="Root" style="flex-grow: 0; margin-left: 12px; margin-right: 12px; margin-top: 12px; margin-bottom: 12px; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px;">
        <ui:VisualElement name="ButtonContainer" style="flex-grow: 0; background-color: rgba(0, 0, 0, 0); margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px;">
            <ui:Button text="Button01" display-tooltip-when-elided="true" name="Button01" style="margin-left: 12px; margin-right: 12px; margin-top: 12px; margin-bottom: 12px;" />
        </ui:VisualElement>
        <ui:Button text="Button02" display-tooltip-when-elided="true" name="Button02" style="margin-left: 12px; margin-right: 12px; margin-top: 12px; margin-bottom: 12px;" />
    </ui:VisualElement>
</ui:UXML>

これにUSSでスタイルを適用していきます。

「OR条件」はカンマで区切る

セレクタをOR条件で指定するには、セレクタをカンマで区切ります。
以下はnameがButton01かButton02の要素に対してスタイルを適用する例です。

#Button01,#Button02 {
    background-color: aquamarine;
}

結果は下図の通りになります。

OR条件

「AND条件」は区切らない（注意点あり）

各セレクタを区切らず連続して記述するとAND条件となります。
以下は型がButtonかつ名前がButton01の要素に対してスタイルを適用する例です。

Button#Button01 {
    background-color: aquamarine;
}

適用した結果は下図の通りです。

AND条件

注意点として、この指定方法に型セレクタを使う場合には、以下の条件を満たす必要があります。

つまり、型セレクタを二つAND条件で指定することはできません（そもそもすることはないとは思いますが）。

子要素だけを対象にするには > を使う

ある要素の子要素に対してセレクタを指定するには、親セレクタ > 子セレクタと記述します。
以下はnameがRootの要素の子要素のうち、Button型のものにだけスタイルを適用する例です。

#Root > Button {
    background-color: aquamarine;
}

適用した結果は下図の通りです。

子要素だけを対象に

子孫の要素だけを対象にするにはスペースを使う

ある要素の子要素以下の全ての要素に対してセレクタを指定するには、親セレクタ 子孫セレクタというようにセレクタ同士の間にスペースを入れる形で記述します。
以下はnameがRootの要素の子要素以下の要素について、Button型のものにだけスタイルを適用する例です。

#Root Button {
    background-color: aquamarine;
}

これを適用した結果は下図の通りです。

子孫の要素だけを対象に

組み合わせて複雑な条件を表現する

以上を組み合わせて複雑な条件を作ることができます。

VisualElement#ButtonContainer > Button,Label {
    background-color: aquamarine;
}

参考

docs.unity3d.com

docs.unity3d.com

docs.unity3d.com