🦉 The “Lobotomised Owl” Selector

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

* + * {
  margin-top: 1.5em;
}

    

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

For more on the “lobotomised owl” selector, read Heydon Pickering’s post on A List Apart.

Demo Jump to heading

Flow space utility Jump to heading

The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

    

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity.

For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.