Can html element be skipped by css? - html

Question

TL;DR:
Is it possible for css to ignore html element, but not its children?
Such element would be treated by css as if it wasn't there; but its children would be treated normally, i.e. as children of parent of the ignored element.
Details, Motivation:
Let's say we have a nice styled layout, e.g. with display: flex.
<div className="outer"><!-- this one has display: flex (just example) -->
<div className="inner">Foo</div>
<div className="inner">Bar</div>
<div className="inner">Baz</div>
<div className="inner">Foo 2</div>
<div className="inner">Bar 2</div>
<div className="inner">Baz 2</div>
</div>
But then, we need to wrap one group of our inner elements into form, or nav (for semantic or other reasons):
<div className="outer">
<div className="inner">Foo</div>
<div className="inner">Bar</div>
<div className="inner">Baz</div>
<form>
<div className="inner">Foo 2</div>
<div className="inner">Bar 2</div>
<div className="inner">Baz 2</div>
</form>
</div>
Well, of course this breaks our desired layout (e.g. flex), because <form> became the child of outer, and sibling of the first three inners.
Is it possible to make an element, in this case form, to be ignored by css - as if it wasn't there in the html element tree?
If it's not possible, has this feature ever been considered, worked on, rejected... ?

Answer 1

That's exactly what display:contents is designed to do. So:
form { display:contents }
.outer {
display: flex;
justify-content: space-evenly;
}
form {
display: contents;
}
<div class="outer">
<div class="inner">Foo</div>
<div class="inner">Bar</div>
<div class="inner">Baz</div>
<form>
<div class="inner">Foo 2</div>
<div class="inner">Bar 2</div>
<div class="inner">Baz 2</div>
</form>
</div>

Answer 2

just set the form to display: flex
now the form is a direct child... so you can for example set it to flex:1 or so.
and you will get a new "parent" for the form child elements.