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.

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:
| Situation | When styles apply |
|---|---|
| Default | Always — these are the base styles for the element |
| When odd | When the element is at an odd position (1st, 3rd, 5th…) among its siblings |
| When even | When the element is at an even position (2nd, 4th, 6th…) among its siblings |
| When first | Only for the first child element among its siblings |
| When last | Only for the last child element among its siblings |
| When empty | When the element has no visible children |
Setting situational styles
- Select an element in the canvas.
- Open the Styles tab in the right panel.
- Choose a situation from the Situation dropdown (for example, “When even”).
- Set the styles you want for that situation — background color, text color, borders, or any other style property.
- 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.

Common use cases
Alternating row colors
The most common use of situational styling is zebra-striping rows in a repeated list:
- Create a Container and enable Repetition on it (for example, over
invoice.items). - Set the Default background to white.
- 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:
- Select the repeated element.
- Switch to When last.
- Add a bottom border.
Empty collection fallback
To show a message when a collection has no items:
- Create a Container with Repetition enabled over the collection.
- Inside it, add the content that should repeat.
- Select the repeated Container itself.
- Switch to When empty.
- Set styles that make the empty-state content visible (for example, set a minimum height and center-align text).
Combining with conditions and loops
Situational styling works hand-in-hand with the Conditions and Loops features. A typical pattern is:
- Set up Repetition on a container to loop over a data collection.
- Apply situational styles on the repeated element or its children for visual variation.
- 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.”