Styling Breakdance Elements in Oxygen

Breakdance Elements can be used inside Oxygen like any other element, but they are styled differently from native Oxygen elements. Understanding why will help you style them correctly and avoid frustration.

This is not a limitation or a bug — it’s a result of how CSS works and how Breakdance elements are built.

Why class styling often doesn’t work

In Oxygen, a class always applies to the root HTML element of whatever you attach it to. Native Oxygen elements have a simple structure (one main HTML element), so class styling behaves as expected.

Breakdance Elements are different.

Most Breakdance Elements are composite elements, meaning they are made up of multiple nested HTML elements with their own internal structure and CSS selectors. The visual parts you want to style (buttons, text, images, wrappers, icons, etc.) are often not the root element.

So when you add a class:

The class is applied correctly but it only affects the root element
The visible parts are styled by more specific internal selectors
Your class styles are overridden by normal CSS rules

This is standard CSS behaviour.

Breakdance Elements are designed to be styled via Design controls

Breakdance Elements are primarily designed to be styled using the Design tab, not via classes.

The design controls target the correct internal selectors automatically, which is why:

Styles apply consistently
You don’t need to fight specificity
You don’t need to inspect markup

This is the recommended approach and should always be your first choice.

When you do need to use classes

There are times when you need class-based styling:

You want shared styling across multiple elements
You’re building a design system
You’re overriding default styles
You’re styling plugin output, shortcodes, or Breakdance elements together

In these cases, you need to apply a more specific selector, just like you would in normal CSS.

How to correctly override styles

1. Use Nested Selectors

From the Class dropdown, you can add a nested selector to target child elements.

This works for:

Simple child elements
Native Oxygen elements
Some Breakdance child elements

However, in many cases, Breakdance’s internal selectors are more specific, so nested selectors may not be enough.

2. Use the Selectors panel

The Selectors panel lets you create your own selectors that target exactly the element you want.

This is the correct way to override:

Breakdance Element styles
Some complex third-party plugin output
Complex nested structures

This approach mirrors writing real CSS and gives you full control.

3. Write custom CSS in the Class Custom CSS box

If you prefer writing CSS directly, you can add it in the Custom CSS box of the Class properties panel.

This is useful when you already know the selector
You’re matching existing CSS patterns

3. Write custom CSS in a Snippets Type Plugin

If you find you’re writing lots of CSS, then you may wish to look at a snippets type plugin, such as WPCodeBox.

Again, this is normal CSS — it’s not an Oxygen oddity.

To override any style, your selector must be more specific than the one you’re overriding.

If you’re unsure how specificity works, read the MDN guide here: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity

Updated on: January 29, 2026