CSS display contents

The CSS property display: contents allows an element’s children to be rendered without displaying the element itself. When this property is applied, the browser behaves as though the element doesn’t exist, but its children are still visible and maintain their layout.

This is useful when you don’t have full control over the HTML structure but need to style an element’s children as if they were direct children of the parent element.

In the example below, the .nested element is skipped in the flex layout, and the span elements inside it are treated as direct children of the .container element:

<div class="container">
  <span>Item 1</span>
  <span>Item 2</span>
  <div class="nested">
    <span>Item 3</span>
    <span>Item 4</span>
  </div>
</div>

.container {
  display: flex;
  gap: 10px;
}

.nested {
  display: contents;
}

One downside of using display: contents is that it can cause accessibility issues, so it’s generally recommended to avoid using it with interactive elements like buttons.

See more:

• caniuse
• MDN