The Mysterious 'Owl' (+)

#css #webdev #beginners #html

Consider a scenario, where you're asked to design a Stack layout, something similar to the below one.

Normally as a WEB DEVELOPER 😅 we will try this,

<style>
  .stack {
    background-color: yellow;
  }
  .stack > div {
    margin-bottom: 40px;
  }
</style>

We will wrap the three text divs with a common div and apply margin-bottom to all its' children. As of now we will be happy with our implementation, thinking how great we are 😅 that the STACK layout is done in a matter of minutes.

However, this will be our output 😩

If you closely see the image, you will notice the third text div also has the margin-bottom style applied on it, which we don't want to happen.

We will try to fix the breakage by doing something similar to this,

<style>
 .stack > div:last-child {
  margin-bottom: 0px;
}
</style>

We will reach our destination, but the path we took... isn't it ugly? 😷

While thinking of other possibilities, I came across (* + *), a construct known as the Owl and its' powers. But the only thing to note is that the 🦉 is little mysterious!. No worries though, let's clear up the mystery behind and unveil its' greatest powers down here...

The 'Owl' construct selects 'any HTML element that is next to or follows(sibling) any other HTML element' booyah 😅

Come lets' smash out the theory, get hands-on with the 🦉

Consider the same snippet updated with,

<style>
  .stack {
    background-color: yellow;
  }
  .stack > *+* {
    margin-top: 1.5em;
  }
</style>

Boom 💥 that's it! This is much simple compared to our old prototypes.

Now the path we took was very clear and really beautiful 😍,

Now lets' dig on to check out what it does underhood 🔍

Digging the snippet we come to know that the Owl construct selects the 2nd and 3rd child and applies margin-top: 1.5em respectively as defined. It doesn't select the first child because, it is an immediate successor of the parent and doesn't have any previous siblings(general behaviour of '+' selector).

Now, I doubted the layout in case of nested HTML elements, an evil thought though 👽, something more specifically like 👇

<div class="stack">
  <div>
    ...
    <div class="inner-div">
      <div>
        ...
      </div>
      <div>
        ... 
      </div>
    </div>
   ...
 </div>
  <div>
    ... 
  </div>
  <div>
    ...
  </div>
</div>

Using our existing style definitions, The inner divs have no margins. The layout obtained is 👇

Oops what to do now, scratched my head a lil' bit and just removed the Child combinator preceding our Owl construct.

<style>
  .stack {
    background-color: yellow;
  }
  .stack *+* {
    margin-top: 1.5em;
  }
</style>

The output obtained is 🎉

So, what the previous snippet does is that, it applies the 'Owl' construct recursively to all descendants not limiting only to the direct children of parent div element.

Hope, you guys figured out the Owl construct with this post. Thanks for being patient till the end fellas! 😆

Top comments (7)

Adam Crockett 🌀 • Sep 26 '19 • Edited

So I'm of a different school of thought these days, have you looked into BEM or ECSS at all? Specificity is powerful yes but man is it the pain point of CSS. I also am not a massive fan of * selector even if adjecent, it's slow.

* Means look at the 100s of possible known elements or attributes that COULD be a selector. I'd do this instead

.list-item:not(:first-of-type)
.list-item:not(:last-of-type) {
   // See benchmarks bellow
}

reddit.com/r/web_design/comments/5...

Aswathprabhu R • Sep 27 '19

I agree that high specificity selectors can sometimes be a pain point for scaled projects, and also thanks for your approach mate 😁Cheers!

Adam Crockett 🌀 • Sep 27 '19

Your most welcome, I didn't just want to say no that's rubbish and not offer an alternative. The refit post has an interesting benchmark that might help everyone reach a verdict.