CSS Subset

Bevy ECSS only supports a subset of CSS at moment, since many properties and features requires more advanced selectors, components and properties which currently isn't implemented.

Here you can find a list of all currently supported selectors and properties:

Selectors

TypeDetailsExample
NameSelects by using bevy built-int Name component.#inventory { ... }
ClassSelects by using Class component, which is provided by Bevy ECSS..enabled { ... }
ComponentSelects by using any component, but it has to be registered before usage. You can find more details bellow.button { ... }
PseudoClassSelects by using pseudo-classes. A list of supported pseudo-classes are listed at the end of the page.:hover { ... }

You may combine any of the above selector types to create a complex selector, if you like so. For instance, window.enabled.pop-up select all windows, which are enabled and are of pop-up type. The same rules of CSS Class selectors applies here.

This assumes that window is a bevy_ecs component and was registered before usage. Also assumes the entities has the Class component with at least enabled pop-up class name.

Aditionally, Bevy ECSS also supports descendant combinator which selects all entities that are descendant the given selector tree.

#quest-window text {
    color: red;
}

The above rule will match all entities which has a Text component and is descendant of any entity which as a Name component which the value of quest-window.

So it's possible to combine complex composed selectors with descendant combinator.

#main-menu button.enabled .border {
    background-color: #ff03ab;
}

This rule will match all components which has a Class with the value of border and are descendant of any entity which has a button component and a Class component with the value of enabled and also are descendant of any entity which has a Name component with value main-menu.

Supported pseudo-classes

Pseudo-ClassDescription
:hoverMatches any entity which has Interaction component with Interaction::Hovered variant.