Is it possible to unwrap a HTML element using CSS?

Question

I have a content management system that generates code like

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

and depending on the query it might also generate

<div class="container">
    <div class="section">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</div>

I want container be a flexbox container, and item be flexbox children in all cases.

Is there a way to unwrap the section element (=make the browser ignore this div layer - so that the item elements will be treated as if they where direct children of container)?

Or is that impossible with pure CSS?

Not generically, yet. There's a possible saviour coming: `display: contents`. — Brandon Hill, Apr 13 '21 at 16:01

score 2 · Answer 1 · answered Apr 13 '21 at 16:00

You can do that like this:

.container, .container > .section {
    display: flex;
    ...
}
.container > .item, .container > .section > .item {
    ...
}

It wouldn’t be a good idea to remove the section element because that is there for a reason. But the css above will take care of both cases.

Mihail Minkov · Answer 2 · 2021-04-13T17:19:47.693

1

As far as children elements are concerned, .section is a child element of .container and .item elements are children of .section. There isn't a way to ignore this via CSS.

I'd recommend you copy the styles of .container to .section and just make the necessary adjustments there.

It would help if you shared your current styles.

edited Apr 13 '21 at 17:19

answered Apr 13 '21 at 16:00

Mihail Minkov

2,078
2
19
32

score 1 · Answer 3 · answered Apr 13 '21 at 16:16

1

You can add new rules for case when CMS creates additional tag and then add specificity them to increase chances that correct rule will be applied:

div.container div.section {
   display: flex;
}

Is it possible to unwrap a HTML element using CSS?

3 Answers3