Why >+ Is the CSS Trick You Didn’t Know You Needed
Why >+ Is the CSS Trick You Didn’t Know You Needed
I stumbled on a CSS trick that’s been hiding in plain sight.
Your CSS is a tangled mess, and you’re tired of fixing spacing issues every time the markup changes.
The Owl selector isn’t just another CSS trick, it’s a lifeline for developers who value efficiency. The Owl selector, or >*+*, is a game-changer for spacing sibling elements without extra markup or complex rules.
How is This Not in Every Developer’s Toolkit?
Let’s dive into this quirky technique and see why it’s a gem for web developers craving clean, maintainable stylesheets.
It’s my go-to for keeping layouts clean without endless manual adjustments.
The Owl selector, *** + ***, ensures every sibling element gets consistent spacing, perfect for dynamic content. This little CSS trick is a personal favorite for taming document flow.
How It Works
This selector targets any element following another, applying uniform styles. Its beauty lies in its simplicity, no need to name every tag explicitly.
Introduced by Heydon Pickering in 2014, it’s a minimalist’s dream for document flow.
Understanding the Concept
Think of the Owl selector as a traffic cop directing space between elements, ensuring no two siblings crash into each other.
Example
Here’s a quick look at it in action:
-
-
- {
margin-top: 1rem;
}
- {
-
This adds a 1rem gap above every element that follows another, keeping your layout tidy.
Scoping the Technique
Applying *** + *** too broadly can add unwanted spacing to non-content elements like scripts or SVGs.
Refine it by scoping to a container, like .content *** + ***, for precision.
Here’s a chained and nested approach.
/* Chained */
.content * + * {
margin-top: 1rem;
}
/* Nested */
.content article * + * {
margin-top: 0.5rem;
}
Scoping keeps spacing intentional, affecting only the elements you want.
Visual Example
Imagine a stack of colored boxes, each separated by a neat gap.
Press enter or click to view image in full size
Boxes with consistent 1rem top margins, creating a clean vertical rhythm.
John Allsopp, a web standards advocate, once said, “The power of CSS lies in its ability to create flexible, reusable patterns.”
Traditional Approach
Old-school spacing often meant adding margins to specific elements.
p {
margin-top: 1rem;
}
div {
margin-top: 1rem;
}
This gets messy fast, requiring updates for every new element type.
It works, but it’s like duct-taping your layout together 
.
Here’s the Owl selector as a cleaner alternative.
-
-
- {
margin-top: 1rem;
}
- {
-
Complex Example
Real layouts aren’t always neat stacks of paragraphs. Consider a blog post with headings, images, and lists.
Title
First paragraph.
- Item 1
- Item 2
Visualize this as a vertical stack with varied elements.
- Headings and paragraphs align with consistent gaps.
- Images and lists respect the same spacing hierarchy.
- The structure feels cohesive, not chaotic.
Apply the Owl selector to the parent.
.post * + * {
margin-top: 1rem;
}
Now, target a nested list for finer control.
.post ul * + * {
margin-top: 0.5rem;
}
Combine for efficiency.
.post * + * {
margin-top: 1rem;
}
.post ul * + * {
margin-top: 0.5rem;
}
Handling Change
The Owl selector shines when layouts shift. Imagine a CMS where editors add or remove images. The selector adapts, keeping spacing consistent without extra CSS tweaks.
Alternative Approach 
The gap property in Flexbox or Grid offers similar spacing control.
.container {
display: flex;
flex-direction: column;
gap: 1rem;
}
Pros of gap
- Works natively in modern layouts.
- Simplifies spacing in flex or grid contexts.
- Visually clean and intuitive.
Cons of gap
It requires a flex or grid container, which isn’t always ideal for document flow. Stick with the Owl selector for simpler, flow-based layouts.
Closing Thoughts
CSS keeps surprising us with elegant solutions. A small selector like *** + *** can transform how you manage spacing. Keep experimenting to craft layouts that feel effortless.