Summary:
Can CSS be instructed to ignore an HTML element without affecting its children? The ignored element should not impact the styling of its children, treating them as if they were direct descendants of the parent.
In Depth Analysis:
Imagine a carefully designed layout using CSS properties like 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>
Now, consider the scenario where we need to enclose a group of inner elements in a form, or nav tag for semantic purposes:
<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>
This change disrupts our desired layout as the form is now considered a sibling of the first three inner elements within outer.
Is there a way to make an element, such as form, completely invisible to CSS, essentially removing it from the HTML element tree?
If not currently possible, has there been any discussion, development, or rejection of this potential feature?