Selectors determine which elements USS rules affect. When Unity applies a style sheet to a visual tree, it matches elements to selectors. If an element matches a selector, Unity applies the selector’s style rule to the element.
USS supports several types of simple and complex selectors that match elements based on different criteria, such as:
name
propertyIt also supports pseudo classes that you can use with selectors to target elements that are in a specific state.
If an element matches more than one selector, Unity applies the styles from whichever selector takes precedence.
USS supports a set of simple selectors that are analogous, but not identical, to simple selectors in CSS. It also supports a subset of CSS complex selectors and pseudo-classes.
The table below provides a quick reference of USS simple selectors. For details, see Simple selectors.
Selector type: | Syntax: | Matches: |
---|---|---|
C# type | Type {...} |
Elements of a specific C# type |
USS class | .class {...} |
Elements with an assigned USS class |
Name | #name {..} |
Elements with an assigned name attribute |
Wildcard | * {...} |
Any element |
The table below provides a quick reference of USS complex selectors. For details, see Complex selectors.
Selector type: | Syntax: | Matches: |
---|---|---|
Descendant selector | selector1 selector2 {...} |
Any descendants of the first selector, at any level, that also match the second selector. |
Child selector | selector1 > selector2 {...} |
Any direct descendants (children) of the first selector that also match the second selector. |
Selector list | selector1, selector2, selector3 {..} |
Any element that matches any selectors in the list. Any element that matches any selectors in the list. A list can contain any mix of simple and/or complex selectors. |
The table below provides a quick reference of USS simple selectors. For details, see Pseuso-classes.
Pseudo-class | Matches an Element when |
---|---|
:hover |
The cursor is positioned over the Element. |
:active |
A user interacts with the Element. |
:inactive |
A user stops interacting with the element. |
:focus |
The element has focus. |
:selected |
N/A. Unity does not use this pseudo-state. |
:disabled |
The Element is set to enabled == false . |
:enabled |
The Element is set to enabled == true . |
:checked |
The Element is a Toggle element and it is toggled on. |
:root |
The Element is the root element (highest-level Element in the visual tree). |
To apply the same style to several types of elements, you can use a selector list in any style rule. A selector list consists of two or more selectors separated by commas. It can contain any combination of simple and complex selectors, and matches any element that matches at least one selector in the list.
Syntax:
selector1, selector2 {...}
A selector list is equivalent to multiple selectors that each declare the same style rule.
Example:
For the example UXML document above, the following two USS snippets have the same effect.
#container2, Button {
background-color: pink;
border-radius: 10px;
}
#container2 {
background-color: pink;
border-radius: 10px;
}
Button {
background-color: pink;
border-radius: 10px;
}
When an element matches more than one selector, Unity considers several factors to determine which selector takes precedence.
How Unity determines precedence depends on whether the conflicting selectors are in the same style sheet or in different style sheets.
When an element matches multiple selectors from the same style sheet, the selector with the highest specificity takes precedence.
If both selectors have the same specificity, the selector that appears last in the USS file takes precedence.
When an element matches multiple selectors in different style sheets, Unity determines precedence according to the following factors in the following order:
Selector specificity is a measure of relevance. The higher the specificity, the more relevant the selector is to the elements it matches.
*
) selector.Styles that target an element directly take precedence over styles that the element inherits, even if the inherited styles are defined in a selector with higher specificity.
Styles that you apply directly to an element override styles that you apply via USS.
Note: |
---|
USS does not support the !important rule used to override style declarations in CSS. |
Inline styles that you apply to elements in a UXML document take precedence over USS styles. You can think of them as having higher specificity than USS selectors.
Styles that you set in C# override any other styles, including USS styles and inline styles. You can think of them as having the highest specificity.
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
More information
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising. Some 3rd party video providers do not allow video views without targeting cookies. If you are experiencing difficulty viewing a video, you will need to set your cookie preferences for targeting to yes if you wish to view videos from these providers. Unity does not control this.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.