Situational Styling

Last updated March 23, 2026

Situational styling lets you change how an element looks depending on its position among its siblings. You can set different background colors for odd and even children, highlight the first or last item, or show a fallback message when a collection is empty — all without writing any code.

The situation selector

Every element has a Situation dropdown at the top of the Styles panel. By default it’s set to “Default”, meaning the styles you set apply in all contexts.

The Situation dropdown in the Styles panel showing all six options

Click the dropdown to choose a different situation. Any styles you set while a non-default situation is selected apply only when that condition matches.

Available situations

The builder provides six situations:

SituationWhen styles apply
DefaultAlways — these are the base styles for the element
When oddWhen the element is at an odd position (1st, 3rd, 5th…) among its siblings
When evenWhen the element is at an even position (2nd, 4th, 6th…) among its siblings
When firstOnly for the first child element among its siblings
When lastOnly for the last child element among its siblings
When emptyWhen the element has no visible children

Setting situational styles

  1. Select an element in the canvas.
  2. Open the Styles tab in the right panel.
  3. Choose a situation from the Situation dropdown (for example, “When even”).
  4. Set the styles you want for that situation — background color, text color, borders, or any other style property.
  5. Switch back to “Default” to continue editing the base styles.

The styles you set under a non-default situation act as overrides. They replace the corresponding default styles only when the condition matches. Properties you don’t set in a situational context fall back to their default values.

The override indicator

When an element has styles set for any non-default situation, a small indigo dot appears next to the Situation dropdown. This visual indicator helps you spot which elements have situational overrides without switching through each situation manually.

Hovering over the dot shows a tooltip listing which situations have overrides defined.

Hovering over the override indicator to reveal which situations have overrides

Common use cases

Alternating row colors

The most common use of situational styling is zebra-striping rows in a repeated list:

  1. Create a Container and enable Repetition on it (for example, over invoice.items).
  2. Set the Default background to white.
  3. Switch to When even and set the background to a light grey.

Each generated row alternates between white and grey automatically.

Highlighting the last item

To add a bottom border only to the last item in a list:

  1. Select the repeated element.
  2. Switch to When last.
  3. Add a bottom border.

Empty collection fallback

To show a message when a collection has no items:

  1. Create a Container with Repetition enabled over the collection.
  2. Inside it, add the content that should repeat.
  3. Select the repeated Container itself.
  4. Switch to When empty.
  5. Set styles that make the empty-state content visible (for example, set a minimum height and center-align text).
“When empty” is particularly useful combined with a child Text block that says something like “No items to display.” The parent container renders with empty-state styles, and the child text provides the message.

Combining with conditions and loops

Situational styling works hand-in-hand with the Conditions and Loops features. A typical pattern is:

  1. Set up Repetition on a container to loop over a data collection.
  2. Apply situational styles on the repeated element or its children for visual variation.
  3. Optionally add Visibility Conditions on child elements inside the loop to show or hide specific content per item.

This combination covers most dynamic layout needs without writing any custom CSS.

Frequently asked questions

How do I create zebra-striped rows in a PDFMonkey builder template?
Enable Repetition on a Container, set the Default background to white, then switch the Situation dropdown to “When even” and set that background to a light grey. Each repeated row automatically alternates colors.
What situational styles are available in the PDFMonkey builder?
The builder provides six situations: Default (always), When odd, When even, When first, When last, and When empty. Each lets you override styles based on the element’s position among its siblings or whether it has visible children.
How do I show a fallback message when a repeated collection is empty?
Select the Container with Repetition enabled, switch the Situation dropdown to “When empty,” and set styles that make the empty-state content visible. Add a child Text block inside with your fallback message such as “No items to display.”