DEV Community

loading...
Cover image for  The Mysterious 'Owl' (*+*)

The Mysterious 'Owl' (*+*)

Aswathprabhu R
Crazy on Web!
・3 min read

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

Stack

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 😩

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.

gif

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

showtime

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>

Layout

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 πŸ‘‡

New Layout

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>

tada

The output obtained is πŸŽ‰

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! πŸ˜†

Discussion (7)

Collapse
adam_cyclones profile image
Adam Crockett • 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...

Collapse
theaswathprabhu profile image
Aswathprabhu R Author

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

Collapse
adam_cyclones profile image
Adam Crockett

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.

Collapse
rachelsoderberg profile image
Rachel Soderberg

I don't know web development, so this wasn't exactly familiar to me - but I still found it to be really interesting! Thanks for the lesson!

Collapse
theaswathprabhu profile image
Aswathprabhu R Author

I'm Glad that this helped you πŸ˜„, thanks for your comment btw.

Collapse
johanneslichtenberger profile image
Johannes Lichtenberger

Ha, I've learned something new, thank you :-) oh and always keep in mind: "The owls are not what they seem" (Twine Peaks reference).

Collapse
theaswathprabhu profile image
Aswathprabhu R Author

Absolutely πŸ˜‚ 'They are not what they seem to be'.