セレクターを説明するために、ここでは以下のビジュアルツリーの例を使用します。
単純セレクターにはワイルドカードまたは、型、名前、クラス名の組み合わせを使用できます。以下は、上のビジュアルツリーの例に基づいた単純セレクターの例です。
#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 つのクラス名を指定すると、同じクラスが割り当てられた要素すべてを探します。例えば、.yellow
は container2 という名前の要素と OK という名前のボタン要素に一致します。
1 つのセレクタで複数のクラスを指定する場合、要素を一致させるには、同じクラス名を割り当てる必要があります。
クラス名を要素に指定するときに .
を加えないでください。
クラス名は数字で始めることはできません。
* { ... }
すべての要素に一致します。
:pseudo-state { ... }
要素が疑似状態になったときに要素を照合するには、pseudo-state を使用します。例えば、Button:hover
は Button
タイプの視覚要素に一致します。ただし、それはユーザーが視覚要素の上にカーソルを置いている場合のみです。
サポートされる擬似状態は以下の通りです。
hover
: カーソルがビジュアル要素の上をホバリングしている。active
: 視覚要素が相互作用している。inactive
: 視覚要素はもはや相互作用していない。focus
: 視覚要素にフォーカスがある。selected
: 未対応disabled
: 視覚要素が enabled == false
に設定されている。enabled
: 視覚要素が enable == true
に設定されている。checked
: 視覚要素が Toggle
要素であり、有効になっている。疑似状態は他の単純セレクターの後に指定します。疑似状態は拡張できません。サポートされている疑似状態はあらかじめ定義されたもののみです。
複合セレクターは、区切り記号を持つ単純セレクターの組み合わせです。複合セレクターにはセレクターリストも含まれています。セレクターリストは同じスタイルを多くの要素に簡単に適用することができます。
UIElement は以下の記号をサポートします。
>
は、前のセレクターに一致した要素の直接の子孫である視覚要素に適用されます。例えば以下の通りです。
#container1 .yellow
: 内部の要素と最初のボタンの両方に一致します。#container2 > .yellow
: 内部の要素のみに一致します。セレクターリストを使用して、同じスタイル定義を多くの要素に適用します。各セレクターはカンマで区切られ、単純セレクターまたは複合セレクターです。
例えば以下の通りです。
#container1, Button { padding-top:10 }
上記は以下と同じ
#container1 { padding-top: 10 } Button { padding-top: 10}
複数のセレクターが同じ要素に一致する場合は、最も特定性の高いセレクターが優先されます。単純セレクターの場合、基本的な特定性のルールは以下のとおりです。
*
2 つのセレクターの特定性が等しい場合は、ファイルのより後ろに表示されるセレクターが優先されます。
異なるファイル間のセレクター特定性を決定するために、UIElement はスタイル適用のために行われるツリーの走査の順序を考慮します。深度と兄弟インデックスが高い要素が優先されます。
デフォルトのスタイルとユーザー定義のスタイルが同じセレクターを持つ場合、ユーザー定義のセレクターがデフォルトのセレクターよりも特定性が高いと見なされます。
!important
キーワードは無視されます。
C# で設定された値は最高の特定性を持ちます。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.