Selector precedence

When an element matches more than one selector, Unity considers several factors to determine which selector takes precedence.

Unity がどのように優先順位を決定するかは、競合するセレクターが同じスタイルシートにあるか、異なるスタイルシートにあるかによって異なります。

Precedence for selectors in the same style sheet

ある要素が同じスタイルシートの複数のセレクターに一致する場合、最も高い 特殊性 を持つセレクターが優先されます。

両方のセレクターが同じ 特殊性 を持つ場合、USS ファイルで最後に表示されたセレクターが優先されます。

Precedence for selectors in different style sheets

When an element matches multiple selectors in different style sheets, Unity determines precedence according to the following factors in this order:

1. The type of style sheet: Selectors from user-defined style sheets takes precedence over selectors from default Unity style sheets.
2. セレクターの特殊性: 両方のセレクターが同じタイプのスタイルシートにある場合、特殊性 が最も高いセレクターが優先されます。
3. 要素階層内のスタイルシートの位置: 両方のセレクターが同じ特殊性を持つ場合、スタイルシートが要素階層内で最も低い位置にあるセレクターが優先されます。
4. The selectors’ positions in their style sheets: If you apply both style sheets at the same level of the hierarchy, the selector closest to the end of its USS file takes precedence.

Selector specificity

セレクターの特殊性は、関連性の指標です。特殊性が高いほど、セレクターが一致する要素との関連性が高いことを意味します。

• Name selectors are more specific than Class selectors.
• Class selectors are more specific than Type selectors.
• Type selectors are more specific than the Universal (*) selector.
• Universal selectors have the lowest specificity.

Style overrides

You can style an element in UI Toolkit by the following:

• In a USS file, write a selector that can affect the element.
• In the UXML document where the element is defined, set inline styles.
• In a C# script, get a reference to an element and set its inline style.
• For an inherited property, the element gets the value from its parent element.

If you apply multiple styling methods to an element, it will undergo style overrides.

Applied styles override inherited styles

たとえ、継承したスタイルがより高い特殊性を持つセレクターで定義されていても、要素を直接ターゲットにしたスタイルは、その要素が継承したスタイルよりも優先されます。

Inline styles override USS styles

Inline styles that you apply to elements in a UXML document take precedence over USS styles. They have a higher specificity than USS selectors.

Note: USS doesn’t support the !important rule used to override style declarations in CSS.

C# styles override inline and USS styles

Styles that you set in a C# script override USS styles and inline styles set in a UXML document. They have the highest specificity.

その他の参考資料

• Apply styles in C# scripts
• Best practices for USS