Can html element be skipped by css?-CodePudding

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... ?

CodePudding user response：

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 >
  <div >Foo</div>
  <div >Bar</div>
  <div >Baz</div>

  <form>
    <div >Foo 2</div>
    <div >Bar 2</div>
    <div >Baz 2</div>
  </form>
</div>

CodePudding user response：

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.