You can build complex expressions to only apply styles to an element when certain conditions are met. You can do that using various selectors.
Most selectors are are placed before the utility function call, for example:
| Turbo CSS expression | Explanation |
|---|---|
|
hover:color-red
|
Set text color to red when the element is hovered
|
|
w10:font-48
|
Set font size to 48px on viewports having a width of at least 1024px
|
|
last:bb-1-solid-gray
|
Give the element a 1px solid gray bottom border if it is the last element in its container
|
Combinators allow you to only apply a utility when other elements meet certain conditions.
| Turbo CSS expression | Explanation |
|---|---|
|
hover:/color-red
|
Set text color to red when the element's parent is hovered
|
|
active:+/last:bg-c-gray-100
|
Give the element a gray background if it is the last element in its container and its parent's preceeding sibling is in active state (eg. button pressed)
|