---
tags:
  - wordpress
  - fse
  - theme.json
  - block-styles
  - css
title: Advanced Styling: Elements inside Block Style Variations
---

# Advanced Styling: Elements inside Block Style Variations

A common challenge in block themes is "Contextual Styling." For example, creating a "Dark Mode" style for a Group block where the background turns black, but the text and **links** must turn white (overriding the global blue link color).

With `theme.json` Version 3 (WordPress 6.6+), you can nest `elements` inside your block style variation definition.

## 1. The Scenario

You want to create a block style for the **Group** block called **"Night Mode"**.
*   **Background:** Black
*   **Text:** White
*   **Links:** Cyan (instead of the global default Blue)
*   **Links on Hover:** White

## 2. The Solution: Nesting `elements`

You define the variation in `styles.blocks.[block].variations`. The key is to place the `elements` object *inside* the `style` object of that variation.

**File:** `theme.json`

```json
{
    "version": 3,
    "styles": {
        "blocks": {
            "core/group": {
                "variations": [
                    {
                        "name": "night-mode",
                        "label": "Night Mode",
                        "style": {
                            "color": {
                                "background": "var(--wp--preset--color--black)",
                                "text": "var(--wp--preset--color--white)"
                            },
                            "elements": {
                                "link": {
                                    "color": {
                                        "text": "var(--wp--preset--color--cyan)"
                                    },
                                    ":hover": {
                                        "color": {
                                            "text": "var(--wp--preset--color--white)"
                                        }
                                    }
                                },
                                "heading": {
                                    "color": {
                                        "text": "var(--wp--preset--color--white)"
                                    }
                                }
                            }
                        }
                    }
                ]
            }
        }
    }
}
```

## 3. How It Compiles

WordPress acts as a compiler here. It generates highly specific CSS selectors that scope your element styles to the variation class.

**Generated CSS (Approximate):**
```css
/* The Wrapper */
.wp-block-group.is-style-night-mode {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

/* The Nested Element */
.wp-block-group.is-style-night-mode a {
    color: var(--wp--preset--color--cyan);
}
```

## 4. Why This Matters

Before this feature, you had to write custom CSS in a separate stylesheet to target `.is-style-night-mode a`. Now, your entire style logic remains encapsulated within `theme.json`, ensuring the editor matches the front end perfectly without extra request overhead.

## 5. Supported Elements

You can target any standard element supported by `theme.json`:
*   `link` (`<a>`)
*   `heading` (`<h1>` - `<h6>`)
*   `button` (`<button>`, `.wp-element-button`)
*   `caption` (`figcaption`)
*   `cite` (`cite`)