Is there a completely "layout-neutral" HTML container element?

Question

Sometimes I want to put a wrapper element around several other HTML elements with the sole purpose of setting up a convenient CSS selector to refer to all the contained elements:

<TAG id="just-a-handy-wrapper">
    <abc ...>
        ...
    </abc>
    ...
    <pqr ...>
        ...
    </pqr>
</TAG>

...and in the CSS:

#just-a-handy wrapper * {
    ...
}

I find this easier to manage and maintain than the alternative of assigning a common class to all the items captured by the #just-a-handy wrapper * selector above.

In this example, I've used fictitious tags <abc>, ..., <pqr>, etc., for the contained elements to stress the fact that I'm looking for a solution that works irrespective of the nature of the specific tags among the contents.

I've also used the fictitious tag TAG as a placeholder for the desired "wrapper tag", because my question is precisely about the best HTML tag to use for this purpose. By "best" I mean most "universal" in the types of elements it can contain in valid HTML5, and "most layout-neutral".

IOW, the ideal HTML tag would the one where the page including the code above would always be rendered exactly the same as one where the <tag ...> and </tag> lines were removed, or commented out:

<!-- <tag id="just-a-handy-wrapper"> -->
    <div ...>
        ...
    </div>
    ...
    <div ...>
        ...
    </div>
<!-- </tag> -->

A div, for example, is not "layout-neutral" (the browser will generally have strong ideas about how to layout a div), therefore it would not do to set tag equal to div. Here's a simple example of this:

• original
• with <div> wrapper around two of the three blue rectangles

Answer 1

Yes, there is a CSS for that supported by major browsers

display: contents

E.g. <section class="container"><div>Parent is virtually not rendered</div></section>

.container {
   display: contents;
}