Conditional styling allows you to create specific variations of an element's appearance that only apply in certain circumstances. This approach enables dynamic interfaces that respond to user interactions, screen sizes, and application states.

There are several methods to apply conditional styles in Nordcraft:

• Style variants via pseudo-classes, pseudo-elements, and media-queries
• Style variants via classes
• Style variables

In the Style section of the styling tab panel, you can create additional style variants that apply only when specific conditions are met:

• Pseudo-classes ( :hover, :active, :focus, etc.)
• Classes defined in the attributes tab
• Media queries for different screen sizes
• Starting style
• Pseudo-elements ( ::before, ::after, etc.)

The styling system supports standard CSS pseudo-classes. Pseudo-classes target elements in specific states, such as :hover, :focus, :checked, or :disabled.

In addition to pseudo-classes, the styling system includes support for standard CSS pseudo-elements, which allow you to style specific parts of an element that don't appear in the element tree, such as ::before, ::after, or ::placeholder.

Add classes to elements through the attributes tab and then create conditional styles for those classes.

1. 1

   Add a class name in the Classes section of the attributes tab
2. 2

   Create a new style variant in the styling tab by selecting that class name
3. 3

   Define the styles that should apply when the class is present

Classes can be conditionally applied using formulas, variables, or attributes. If the condition evaluates to a truthy value, the class and its associated styles will be applied.

Unlike some other tools, classes in Nordcraft are scoped to the element where they're defined:

• Styles added to a class only apply to the specific element where they're created
• Classes are not automatically shared between elements
• For reusable styles across multiple elements, create components instead

This approach maintains clean separation and prevents unintended style conflicts in your application.

Create style variables with dynamic values by binding them to formulas, attributes, or variables:

1. 1

   Define a style variable in the Style variables section
2. 2

   Use the formula editor to create conditional logic
3. 3

   Reference the variable in your CSS properties

This approach is particularly useful for complex conditional styling that depends on application state or user data.

Styles in Nordcraft follow CSS cascade rules, which determine which styles take precedence when multiple styles apply to the same element:

• When multiple style variants apply to an element, all their properties cascade together
• The order of style variants in the style panel matters - later styles override earlier ones
• Specificity also plays a role, with more specific selectors taking precedence
• For example, if both a .selected class and a :hover pseudo-class define background-color:
  • If .selected is defined after :hover in the style list, the .selected color will show even when hovering
  • If :hover is defined after .selected, the hover color will show when hovering over a selected element

This cascade behavior allows for complex styling scenarios, but requires understanding the order in which styles are applied.

Create layouts that adapt to different screen sizes using media query conditions.

When adding a new style variant, you can set media query conditions:

• Set viewport width or viewport height above or below specific values
• Define different layouts optimized for various screen sizes
• Combine media queries with other conditions for complex responsive behavior

Components can be styled from the outside, allowing for customization of specific instances without affecting others.

When you style a component instance:

• Styles are applied only to that specific instance, not to the other instances of the component
• Only the root element of the component can be styled from outside
  • Elements deeper in the component tree are not affected
  • If a component has a slot as its root element, it cannot be styled from the outside

This approach allows you to customize individual component instances when needed, while maintaining the component's encapsulation.

When styling component instances, keep these important limitations in mind:

• You cannot add classes directly to components in the attributes tab
• Only classes that exist on the root element of the component can be styled from outside
• Style variables cannot be added to components
• You cannot style elements deeper in the component tree hierarchy

To apply conditional styling to a component instance:

1. 1

   Select the component in the canvas or element tree
2. 2

   Add a style in the styling tab
3. 3

   Choose from available pseudo-classes, media queries and pseudo-elements
4. 4

   If the component has classes on its root element, these will appear in the Class selection dropdown

For consistent styling across multiple components, consider adding toggleable classes or creating component variants rather than styling individual instances, providing more maintainable solutions.