Custom Selectors

For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name.

You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same.

Usage

The following code maps the alias name controlBtn that matches any .btn CSS class nested under the .controls CSS class.

Expose pseudo-element

Custom selectors generate a pseudo-element. So, for example, importing a stylesheet into another stylesheet enables access to the controlBtn pseudo-element. In this example, the stylesheet comp.st.css from the previous example is imported into this stylesheet.