Conditional styles

By using conditional styling you can create specific variations of an elements style that only applies in certain circumstances such as when the user moves the mouse over the element.

To add a new conditional style click on the + button in the styles section

While a conditional style is selected in the style section any style changes made will only be applied when the condition is met.

While a conditional style is selected, the styles will always be applied to the element in the canvas, even if the condition is not met

toddle supports all the most common CSS pseudo classes from CSS. Learn more about pseudo classes

Cascade

Styles in toddle cascade and multiple styles can be active at the same time.

In the example below both the style properties defined in the Default styles and the :focus styles will be applied when the input element has focus. If the same property is defined in both styles, then the :focus style will take precedence.

Responsive breakpoints

A common use case for conditional styling is creating UIs that adopt to the users screen size.

In this example above the styles will only be applied when the device viewport is wider than 800px.

This is especially useful since different layouts often work best on specific screen sizes. You can create conditional styles when the viewports width or height is either above or below a certain threshold.

Some of the less frequently used conditions are hidden by default. Click the More button to see all available conditions

Styling classes

You can also create a conditional style based a class available on the selected element. To do this first you must add the class in the Attributes tab.

Classes can be conditionally set using a formula. If the formula evaluates to a truthy value, then the class will be present.

A common use case is to add custom styles to a specific element in a repeating list. In this example we added a class "selected" to the list item, with a formula that evaluates to true if the item is selected.

Unlike some other tools, styles added to a class in toddle only applies to the element it is defined on. Classes are not used as a mechanism for sharing styles between elements. If you want to reuse the same styles in multiple places in your application, consider extracting the elements into a component.

Pseudo elements

Pseudo element are parts of HTML element that does not show up in the element tree. Some of the most used psudo elements are:

• :placeholder for styling the placeholder text in an input or textarea
• :selection for styling the selected text inside an element
• : after / :before psudo elements that can be used with any HTML element, read more .