:not(:last-child) vs. Lobotomized owl selector
HTML
<div class="side-by-side">
<div>
<h2>Using :not(:last-child)</h2>
<div class="not-last-child">
<article>
<h2>User-Submitted Article</h2>
<p>Introduction paragraph from a user...</p>
<section>
<h3>Nested Section</h3>
<p>Some user commentary here.</p>
<div class="user-content">
<blockquote>
<p>User might paste in a quote...</p>
<div class="attribution">
<p><em>— Some Author</em></p>
<div class="context">
<p>Additional context about the quote</p>
<div class="deeply-nested">
<p>Users nest things unpredictably</p>
<ul>
<li>Item with <strong>formatting</strong></li>
<li>Another item
<div class="sub-content">
<p>Even deeper nesting (Level 6+)</p>
<blockquote>
<p>Nested quote inside a list item!</p>
</blockquote>
</div>
</li>
</ul>
</div>
</div>
</div>
</blockquote>
</div>
</section>
<div class="comment-thread">
<div class="comment">
<p><strong>User1:</strong> Great post!</p>
<div class="reply">
<p><strong>User2:</strong> I disagree because...</p>
<div class="reply">
<p><strong>User3:</strong> Actually both of you are wrong</p>
<div class="reply">
<p><strong>User1:</strong> Here's why...</p>
<div class="reply">
<p><strong>User4:</strong> This thread is getting deep!</p>
<div class="reply">
...
CSS
.not-last-child *:not(:last-child) {
margin-bottom: 1rem;
}
.lobotomized-owl * + * {
margin-top: 1rem;
}
/* Base styles to show spacing */
* {
margin: 0;
padding: 0;
line-height: 2;
}
.side-by-side {
display: grid;
grid-template-columns: 1fr 1fr;
}
.not-last-child * {
background: rgba(255, 0, 100, 0.06);
padding-left: 1rem;
}
.lobotomized-owl * {
background: rgba(100, 0, 255, 0.06);
padding-left: 1rem;
}