The Mysterious 'Owl' (*+*)
Tags: css, webdev, beginners, html
Published: 2019-09-26 16:40:03

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

<img src="https://i.imgur.com/1wa6h8s.png" alt="Stack">

Normally as a **`WEB DEVELOPER`** :sweat_smile: we will try this,

```html
<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 :sweat_smile: that the **STACK** layout is done in a matter of minutes.

However, this will be our output :weary:

<img src="https://i.imgur.com/q0IBe2r.png" alt="Result">

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.

<img src="https://media.giphy.com/media/SvRjGkRumVxirWv2Yw/giphy.gif" alt="gif">

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

```html
<style>
 .stack > div:last-child {
  margin-bottom: 0px;
}
</style>
```
We will reach our destination, but the path we took... isn't it ugly? :mask:

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...

<img src="https://media.giphy.com/media/ZZHf2yjzb9FZRr8AMa/giphy.gif" alt="showtime">

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

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

Consider the same snippet updated with,

```html
<style>
  .stack {
    background-color: yellow;
  }
  .stack > *+* {
    margin-top: 1.5em;
  }
</style>
``` 
<img src="https://i.imgur.com/1wa6h8s.png" alt="Layout">

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

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

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

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 :alien:, something more specifically like :point_down:

```html
<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 :point_down:

<img src="https://i.imgur.com/imcvqms.png" alt="New Layout">

Oops what to do now, scratched my head a lil' bit and just removed the [Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) preceding our **`Owl`** construct.

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

<img src="https://media.giphy.com/media/Q9FB5RDI86hZmlGTqW/giphy.gif" alt="tada">

The output obtained is :tada:

<img src="https://i.imgur.com/ydoLgE4.png" alt="New one">

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! :satisfied: