3 ms·
For example, let's say you want to create a DOM structure which groups together other elements in an outline like structure, so this: <h1>Hi world!</h1>
by mstade 7y ago
For example, let's say you want to create a DOM structure which groups together other elements in an outline like structure, so this:
<h1>Hi world!</h1>
<p>Lorem ipsum...</p>
<h2>Hi world!</h2>
<p>Lorem ipsum...</p>
<h1>Hi world!</h1>
<p>Lorem ipsum...</p>
Becomes this:
<div class="h-group h1-group">
<h1>Hi world!</h1>
<p>Lorem ipsum...</p>
<div class="h-group h2-group">
<h2>Hi world!</h2>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="h-group h1-group">
<h1>Hi world!</h1>
<p>Lorem ipsum...</p>
</div>
Now you can easily select any h2-level group (heading and elements "belonging" to that heading) by just using the `.h2-group` selector. To my knowledge, there is no way to do this with css selectors alone, so you need the divs, or some other element for grouping. But layout might be getting screwed up because of those divs, so add `.h-group { display: contents; }` and it's like those divs were never there to begin with. Problem solved!
- IfOnlyYouKnew 7y agoThis should be accomplished with the more semantic sectioning tags, i. e. <article> and <section>. It's possible that there are other examples where this isn't possible, but I can't think of any right now. Tags can also be nested, and levels can be selected using CSS dsecendant and child combinators. (This obviously wouldn't change OP's point)
- mstade 7y agoIronically, I actually used section tags in my original snippets but changed to divs before posting simply because I didn't want the discussion to turn into this-vs-that. :o) In any case, the point of course is that at times these groups are added to create a kinship between elements that is otherwise not possible to express via css selections, or because it just makes manipulation easier, and you don't want these grouping elements to participate in layout but the children should. In those cases, `display: contents` is the knight in shining armor.
- recursive 7y ago`h2, h2 ~ p` ought to do it.
- mstade 7y agoIt doesn't: https://jsbin.com/quqibamivo/edit?html,css,output https://jsbin.com/quqibamivo/edit?html,css,output There's no way of doing this with css selectors alone, to my knowledge, you need to wrap the elements in some container.