justin-c (41) [Avatar] Offline
In the flexbox chapter (chapter 5), I'm not understanding why the use of `* + *` to apply `margin-top` to anything in `body` which is not the first child of its parent.

Is this good practice? i.e. is it usually the case that elements which are not the first child of their parent benefit from having a `margin-top` set? We end up reversing this operation later on in several places, e.g.

.site-nav > li {
margin-top: 0

.flex > * + * {
margin-top: 0;


Could you elaborate more on the use of this technique in the book? (I saw chapter 3 - the part where the lobotomized owl was introduced. I get what it does - not why we need it since it seems to cause more work having to stay reversing its effects...).

Thank you.


Later on in the chapter there is another instance of fixing the effects of the owl. Also, the same thing happens in listing 4.9 (another example which uses the owl).

Again in listing 4.10.
Keith J Grant (36) [Avatar] Offline
I do this to help illustrate the plus/minus of using the lobotomized owl. It can be a little annoying to make these minor fixes, but it's also annoying the other way, to add spacing all over the place. In later chapters, you'll see I tend to scope the lobotomized owl only to particular containers rather than the whole page, with selectors like
.tile-row > * + *
justin-c (41) [Avatar] Offline
Ok fair enough. I'll pay more attention to where it was being applied - was missing that.