Lobotomized owl selector

Publish date: Sep 18, 2022
Author: Nemanja

Have you even heard about Lobotomized owl selector in CSS? If not this is how it looks like.

* + * {
  margin-top: 1rem;
}

Crazy CSS stuff right? So what does it do? We all know that ✱ is universal CSS selector that applies given style to all elements in the DOM. The trick here is with ✚ sign adjacent sibling combinator, which will apply given style to all non-first elements, and no matter how many nested levels in your HTML structure you have. But the best way to understand it is to play around with margin-top in this code pen example created by Adam Berkowitz. Also, in this blog post Axiomatic CSS and Lobotomized Owls Heydon Pickering explains it in a lot more details.